<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>5.CSS | Electrolux_blog</title>
    <meta name="description" content="hello world">
    <link rel="preload stylesheet" href="/front-base-know-blog/assets/style.4f9339b2.css" as="style">
    <script type="module" src="/front-base-know-blog/assets/app.b7849f6a.js"></script>
    <link rel="preload" href="/front-base-know-blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/framework.408c4d71.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/theme.bf7db135.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/know_know_7css.md.06a3d117.lean.js">
  <link rel="icon" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>import("/front-base-know-blog/_pagefind/pagefind.js").then(n=>{window.__pagefind__=n}).catch(()=>{console.log("not load /_pagefind/pagefind.js")});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-f0b011de><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f0b011de data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/front-base-know-blog/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg" alt data-v-6db2186b><!--]--><!--[-->Electrolux_blog<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-7c10cd25 style="--dba016e0:1;" data-v-e09e7552><div class="nav-search-btn-wait" data-v-e09e7552><svg width="14" height="14" viewBox="0 0 20 20" data-v-e09e7552><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-e09e7552></path></svg><span class="search-tip" data-v-e09e7552>Search</span><span class="metaKey" data-v-e09e7552> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/know/know/1html" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端基础<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/supper/supper/1%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/python/flask" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Python<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/java/java" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Java<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/project/javadump%E5%88%86%E6%9E%90" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->项目<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f0b011de data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f0b011de data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>前端基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/1html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>html(浏览器)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(1)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/3javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(2)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E6%89%8B%E5%86%99%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 手写题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 代码输出</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/5javascript-es6" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(4) | es6</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(5)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/6ts" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>TypeScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/7css" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>CSS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/8bug" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>BUG</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>计算机基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>计算机网络</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>框架 | 工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/2react" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>react</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/3ssr" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/4%E5%BE%AE%E5%89%8D%E7%AB%AF" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>微前端</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/5vue3" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue3</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/6nginx" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/7python" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>python</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/8ffmpeg" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ffmpeg</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/7tensorFlow" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>tensorFlow</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/8mediapipe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>mediapipe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/10aframe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>aframe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/11%E9%80%86%E5%90%91%E6%95%B0%E6%8D%AEcrawl" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>逆向数据crawl</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/12threejs" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>threejs</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/13electron" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>优化 | 工程</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化和安全</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>算法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/4%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/5npm,%E7%BB%84%E4%BB%B6%E5%BA%93%E6%9E%84%E9%80%A0" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>组件库构造</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/6webrtc" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webrtc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/9.wasm" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>wasm</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/11.webcomponent" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webcomponent</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/12.pwa" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>pwa</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-f0b011de data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _front-base-know-blog_know_know_7css" data-v-c4b0d3cf><div><h1 id="_5-css" tabindex="-1">5.CSS <a class="header-anchor" href="#_5-css" aria-label="Permalink to &quot;5.CSS&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#_5-1-基础">5.1 基础</a><ul><li><a href="#_5-1-1-border-box-content-box">5.1.1 border-box | content-box</a></li><li><a href="#_5-1-2-兼容性-input-内联">5.1.2 兼容性 | input | 内联</a></li><li><a href="#_5-1-3-优先级-难-权重-100个id选择器样式也不会超过内联样式">5.1.3 优先级(难) | 权重 | 100个id选择器样式也不会超过内联样式</a></li><li><a href="#_5-1-4-display-visibility-opacity">5.1.4.display | visibility | opacity</a></li><li><a href="#_5-1-5-容器查询-container-queries-难-container-name-type">5.1.5 容器查询(Container Queries) | 难 | container name | type</a></li><li><a href="#_5-1-5-bfc">5.1.5.BFC</a></li><li><a href="#_5-1-6-css3-新特性">5.1.6.CSS3 | 新特性</a></li><li><a href="#_5-1-7-hsl颜色-色值-饱和度-亮度-透明度">5.1.7 hsl颜色(色值，饱和度，亮度，透明度)</a></li><li><a href="#_5-1-8-pointer-events-cursor-鼠标事件-处理遮罩-鼠标移入">5.1.8 pointer-events | cursor | 鼠标事件 | 处理遮罩 | 鼠标移入</a></li><li><a href="#_5-1-9-aspect-radio-纵横比">5.1.9 (aspect-radio) 纵横比</a></li><li><a href="#_5-1-10-resize-both-overflow-拖动大小">5.1.10 (resize: both + overflow)拖动大小</a></li><li><a href="#_5-1-10-性能">5.1.10.性能</a></li><li><a href="#_5-1-11-text-overflow">5.1.11.text-overflow</a></li><li><a href="#_5-1-12-shadow-元素">5.1.12 shadow 元素</a></li><li><a href="#_5-1-15-filter">5.1.15. filter</a></li><li><a href="#_5-1-16-calc">5.1.16.calc</a></li><li><a href="#_5-1-19-line-height-height">5.1.19.line-height | height</a></li><li><a href="#_5-1-20-渐变阴影的优雅处理">5.1.20 渐变阴影的优雅处理</a></li><li><a href="#_5-1-21-absolute-fixed-float">5.1.21.absolute | fixed | float</a></li><li><a href="#_5-1-25-js-css-变量">5.1.25.js | css 变量</a></li><li><a href="#_5-1-24-befor-hover-常用伪类">5.1.24. :befor | :hover | 常用伪类</a></li><li><a href="#_5-1-25-vh-vw-vmin-rem">5.1.25.vh | vw | vmin | rem</a></li><li><a href="#_5-1-31-temple标签">5.1.31 temple标签</a></li><li><a href="#_5-1-32-scroll-snap-type-滚动贴合-轮播图">5.1.32 scroll-snap-type(滚动贴合+轮播图)</a></li><li><a href="#_5-1-33-子元素触动父元素">5.1.33 子元素触动父元素</a></li><li><a href="#_5-1-34-动画的暂停-和-恢复">5.1.34 动画的暂停 和 恢复</a></li><li><a href="#_5-1-35-加载字体">5.1.35 加载字体</a></li><li><a href="#_5-1-36-flex布局">5.1.36 Flex布局</a></li><li><a href="#_5-1-37-grid布局">5.1.37 Grid布局</a></li><li><a href="#_5-1-38-css写错会怎么样">5.1.38 css写错会怎么样</a></li><li><a href="#_5-1-39-包含块">5.1.39 包含块</a></li></ul></li><li><a href="#_5-2-快问快答-效果实现">5.2 快问快答（效果实现）</a><ul><li><a href="#_5-2-1-清除浮动方法">5.2.1 清除浮动方法</a></li><li><a href="#_5-2-2-视觉滚动效果">5.2.2 视觉滚动效果</a></li><li><a href="#_5-2-3-画三角形效果">5.2.3.画三角形效果</a></li><li><a href="#_5-2-4-实现两栏布局-效果">5.2.4 实现两栏布局 效果</a></li><li><a href="#_5-2-5-实现父子元素absolution的宽高相等">5.2.5 实现父子元素absolution的宽高相等</a></li><li><a href="#_5-2-6-实现居中">5.2.6.实现居中</a></li><li><a href="#_5-2-7-实现sticky">5.2.7.实现sticky</a></li><li><a href="#_5-2-8-高z-index的容器空白处点击事件被吸收的问题处理">5.2.8.高z-index的容器空白处点击事件被吸收的问题处理</a></li><li><a href="#_5-2-9-对齐问题">5.2.9 对齐问题</a></li><li><a href="#_5-2-10-滚动贴合-轮播图">5.2.10 滚动贴合 + 轮播图</a></li></ul></li><li><a href="#_5-3-css手写题">5.3 CSS手写题</a><ul><li><a href="#_5-5-1-实现一个从下到上动画的模态窗">5.5.1.实现一个从下到上动画的模态窗</a></li><li><a href="#_5-5-2-实现手风琴">5.5.2 实现手风琴</a></li></ul></li><li><a href="#_5-4-svg原理-icon-实操">5.4 svg原理 | icon 实操</a><ul><li><a href="#_5-4-1重要的属性">5.4.1重要的属性</a></li><li><a href="#_5-4-2重要的标签">5.4.2重要的标签</a></li><li><a href="#_5-4-3-基础示例">5.4.3 基础示例</a></li><li><a href="#_5-4-5-unicode-引入icon">5.4.5 unicode | 引入icon</a></li><li><a href="#_5-4-6-font-class-引入icon">5.4.6 font class | 引入icon</a></li><li><a href="#_5-4-7-symbol-引入icon">5.4.7 symbol | 引入icon</a></li></ul></li><li><a href="#_5-5-动画动效">5.5 动画动效</a><ul><li><a href="#_5-5-1-gif-多用">5.5.1 gif(多用)</a></li><li><a href="#_5-5-2-png序列帧动画-少用">5.5.2 png序列帧动画(少用)</a></li><li><a href="#_5-5-3-lottie动画">5.5.3 Lottie动画</a></li><li><a href="#_5-5-4-css动画实例">5.5.4 css动画实例</a></li><li><a href="#_5-5-4-1-keyframes-animation-name-duration-fill-mode">5.5.4.1 keyframes | animation-name/duration/fill-mode</a></li><li><a href="#_5-5-4-2-transition-hover示例">5.5.4.2 transition(hover示例)</a></li></ul></li><li><a href="#_5-6-滚动条样式">5.6 滚动条样式</a><ul><li><a href="#_5-6-1-箭头-scrollbar-button">5.6.1 箭头 | scrollbar-button</a></li><li><a href="#_5-6-2-可以拖动的滑块-scrollbar-thumb">5.6.2 可以拖动的滑块 | scrollbar-thumb</a></li><li><a href="#_5-6-3-滑块正上下的元素-scrollbar-track-piece">5.6.3 滑块正上下的元素 | scrollbar-track-piece</a></li><li><a href="#_5-6-4整个轨道-scrollbar">5.6.4整个轨道 | scrollbar</a></li><li><a href="#_5-6-5-纯色示例-2-4">5.6.5 纯色示例(.2+.4)</a></li><li><a href="#_5-6-6-火狐示例">5.6.6 火狐示例</a></li></ul></li><li><a href="#_5-7-css-工程化">5.7 css 工程化</a><ul><li><a href="#_5-7-1-预处理器">5.7.1 预处理器</a></li><li><a href="#_5-7-2-命名-oocss-bem-smacss">5.7.2 命名 | oocss | bem | smacss</a></li><li><a href="#_5-7-3-postcss">5.7.3 postcss</a></li></ul></li><li><a href="#_5-8-选择器-难">5.8 选择器(难)</a><ul><li><a href="#_5-8-1-邻居-直接相邻-兄弟选择器">5.8.1 邻居(~) | 直接相邻(+)兄弟选择器</a></li><li><a href="#_5-8-2-后代选择器-空格-直接后代选择器">5.8.2 后代选择器(空格) | 直接后代选择器(&gt;)</a></li><li><a href="#_5-8-3-并列元素-逗号">5.8.3 并列元素(逗号)</a></li><li><a href="#_5-8-4-where-is">5.8.4 where | is</a></li></ul></li><li><a href="#_5-9-css新特性">5.9 css新特性</a><ul><li><a href="#_5-9-1-webkit-mask-image">5.9.1 -webkit-mask-image</a></li><li><a href="#_5-9-2-pr-webkit-tap-highlight-color">5.9.2 pr | webkit-tap-highlight-color</a></li></ul></li><li><a href="#_5-11-交互-理论-用户体验法则">5.11 交互 理论 | 用户体验法则</a><ul><li><a href="#_5-11-1-fitts-s-law-菲茨定律">5.11.1 Fitts’s Law(菲茨定律)</a></li><li><a href="#_5-11-2-doherty-threshold-多尔蒂阈值">5.11.2 Doherty Threshold（多尔蒂阈值）</a></li><li><a href="#_5-11-3-goal-gradient-effect-目标梯度效应">5.11.3 Goal-Gradient Effect(目标梯度效应)</a></li><li><a href="#_5-11-4-hick-s-law-希克定律">5.11.4 Hick’s Law(希克定律)</a></li><li><a href="#_5-11-5-jakob-s-law-雅各布定律">5.11.5 Jakob’s Law(雅各布定律)</a></li><li><a href="#_5-11-6-布局法则">5.11.6 布局法则</a></li><li><a href="#_5-11-7-miller-s-law-米勒定律">5.11.7 Miller’s Law(米勒定律)</a></li><li><a href="#_5-11-8-occam-s-razor-奥卡姆剃刀">5.11.8 Occam’s Razor(奥卡姆剃刀)</a></li></ul></li><li><a href="#_5-14-流行设计风格">5.14 流行设计风格</a><ul><li><a href="#_5-14-1-skeuomorphism-拟物">5.14.1 (skeuomorphism)拟物</a></li><li><a href="#_5-14-2-flat-扁平">5.14.2( flat) 扁平</a></li><li><a href="#_5-14-3-material-design-物料设计">5.14.3 (material design) 物料设计</a></li><li><a href="#_5-14-4-neumorphism-新拟态">5.14.4 neumorphism(新拟态)</a></li><li><a href="#_5-14-5-glassmorphism-玻璃态">5.14.5 glassmorphism(玻璃态)</a></li><li><a href="#_5-14-6-claymorphism-泥陶态">5.14.6 claymorphism(泥陶态)</a></li></ul></li><li><a href="#_5-15-大屏无敌的布局">5.15 大屏无敌的布局</a></li><li><a href="#_5-16-优先级">5.16 优先级</a><ul><li><a href="#_5-16-1-级联层-layer-优先级">5.16.1 级联层 | layer 优先级</a></li><li><a href="#_5-16-2-优先级">5.16.2 优先级</a></li></ul></li><li><a href="#_5-17-少见特性">5.17 少见特性</a><ul><li><a href="#_5-17-1-css新单位">5.17.1 css新单位</a></li></ul></li></ul></nav><h2 id="_5-1-基础" tabindex="-1">5.1 基础 <a class="header-anchor" href="#_5-1-基础" aria-label="Permalink to &quot;5.1 基础&quot;">​</a></h2><h3 id="_5-1-1-border-box-content-box" tabindex="-1">5.1.1 border-box | content-box <a class="header-anchor" href="#_5-1-1-border-box-content-box" aria-label="Permalink to &quot;5.1.1 border-box |  content-box&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">怪异盒子模型（ie盒子）：box</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">sizing</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> border</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">box</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">即 width和height 已经包含了 padding 和 border </span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">标准盒模型： box</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">sizing</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">box</span></span></code></pre></div><h3 id="_5-1-2-兼容性-input-内联" tabindex="-1">5.1.2 兼容性 | input | 内联 <a class="header-anchor" href="#_5-1-2-兼容性-input-内联" aria-label="Permalink to &quot;5.1.2 兼容性 | input | 内联&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">内联块元素之间为什么会有小间隙</span><span style="color:#89DDFF;">?</span></span>
<span class="line"><span style="color:#A6ACCD;">内联元素的空格和换行会被解析</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">像img这种不需要文本内容的内联块元素可以给它的父级的font</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">size设为0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">也可以将img的宽高都设为100</span><span style="color:#89DDFF;">%.</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">标签嵌套</span></span>
<span class="line"><span style="color:#A6ACCD;">a标签不能嵌套a标签（链接嵌套浏览器解析为兄弟级关系)</span></span>
<span class="line"><span style="color:#A6ACCD;">p标签不能嵌套块级标签 浏览器解析为兄弟级关系</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span></span>
<span class="line"><span style="color:#A6ACCD;">dataset 是为了 规范而已</span></span></code></pre></div><h3 id="_5-1-3-优先级-难-权重-100个id选择器样式也不会超过内联样式" tabindex="-1">5.1.3 优先级(难) | 权重 | 100个id选择器样式也不会超过内联样式 <a class="header-anchor" href="#_5-1-3-优先级-难-权重-100个id选择器样式也不会超过内联样式" aria-label="Permalink to &quot;5.1.3 优先级(难) | 权重 | 100个id选择器样式也不会超过内联样式&quot;">​</a></h3><p>两个定位元素分别在两个不同的包含元素中， 并且两个包含元素也设置了 z-index 的话，那么这两个元素的堆叠顺序取决于包含元素的 z-index。</p><p><a href="https://specifishity.com" target="_blank" rel="noreferrer">https://specifishity.com</a></p><ul><li>内联样式——得分为 1-0-0-0</li><li>ID——得分为 1-0-0</li><li>类、伪类和属性——得分为 1-0</li><li>元素和伪类——得分为 1</li></ul><p>！important&gt;内联样式（权重：1-0-0-0）&gt;id选择器（权重：1-0-0）&gt;class（权重：1-0）&gt;属性选择器（权重：1-0）&gt;元素选择器（权重：1）&gt;通配符</p><p>相邻同胞选择器(.one+.two 选择.one之后的同一父元素的所有.two元素）、伪类选择器(:hover)、伪元素选择器(:after)、属性选择器([attribute])</p><h3 id="_5-1-4-display-visibility-opacity" tabindex="-1">5.1.4.display | visibility | opacity <a class="header-anchor" href="#_5-1-4-display-visibility-opacity" aria-label="Permalink to &quot;5.1.4.display | visibility |  opacity&quot;">​</a></h3><p>display:none：彻底消失，浏览器重绘重排 visibility:hidden：不重排，但会重绘 opacity:0：不重排，但会重绘</p><h3 id="_5-1-5-容器查询-container-queries-难-container-name-type" tabindex="-1">5.1.5 容器查询(Container Queries) | 难 | container name | type <a class="header-anchor" href="#_5-1-5-容器查询-container-queries-难-container-name-type" aria-label="Permalink to &quot;5.1.5 容器查询(Container Queries) | 难 | container name | type&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">针对组件来做自适应</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">组件化的思路</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">父级容器contain: layout inline-size;</span></span>
<span class="line"><span style="color:#A6ACCD;">子元素就可以</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">@container (min-width: 700px) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  .card {</span></span>
<span class="line"><span style="color:#A6ACCD;">    display: grid;</span></span>
<span class="line"><span style="color:#A6ACCD;">    grid-template-columns: 2fr 1fr;</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            container-type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inline-size</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            container-name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> name</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;">/* border: 1px black solid; */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">@container</span><span style="color:#A6ACCD;"> name (max-width: 800px) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">text</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">container</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">      </span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">koofe</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p>给容器设置一个 contain 属性</p><h3 id="_5-1-5-bfc" tabindex="-1">5.1.5.BFC <a class="header-anchor" href="#_5-1-5-bfc" aria-label="Permalink to &quot;5.1.5.BFC&quot;">​</a></h3><p>块级格式化上下文</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">个人理解BFC就是开启了一块独立的渲染区域，容器内的布局不会影响到外部</span></span>
<span class="line"><span style="color:#A6ACCD;">开启bfc的条件：</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">浮动元素（float）和绝对固定定位元素定位元素  </span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flex或者grid的 的 直接子元素</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">根元素</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">html标签</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">解决方案：1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">overflow：hidden（没有副作用）</span></span></code></pre></div><p>应用：</p><ul><li><p>使得若干元素不在同一BFC内来消除外边距折叠。</p></li><li><p>在使用子元素float的情况下，父元素不会包裹住子元素，这时候设置父元素生成一个BFC，就可以清除内部浮动</p></li><li></li></ul><h3 id="_5-1-6-css3-新特性" tabindex="-1">5.1.6.CSS3 | 新特性 <a class="header-anchor" href="#_5-1-6-css3-新特性" aria-label="Permalink to &quot;5.1.6.CSS3 | 新特性&quot;">​</a></h3><p>加了一些选择器 边框新样式：border-radius、box-shadow、border-image、text-overflow(clip, ellipsis)、rgba() transform转换：位移、缩放、旋转、倾斜 渐变 flex布局 媒体查询</p><h3 id="_5-1-7-hsl颜色-色值-饱和度-亮度-透明度" tabindex="-1">5.1.7 hsl颜色(色值，饱和度，亮度，透明度) <a class="header-anchor" href="#_5-1-7-hsl颜色-色值-饱和度-亮度-透明度" aria-label="Permalink to &quot;5.1.7 hsl颜色(色值，饱和度，亮度，透明度)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">越接近0，颜色越深。约接近255，越来越浅</span></span>
<span class="line"><span style="color:#FFCB6B;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hsl</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">240</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16</span><span style="color:#89DDFF;">%,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">59</span><span style="color:#89DDFF;">%</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h3 id="_5-1-8-pointer-events-cursor-鼠标事件-处理遮罩-鼠标移入" tabindex="-1">5.1.8 pointer-events | cursor | 鼠标事件 | 处理遮罩 | 鼠标移入 <a class="header-anchor" href="#_5-1-8-pointer-events-cursor-鼠标事件-处理遮罩-鼠标移入" aria-label="Permalink to &quot;5.1.8 pointer-events |  cursor | 鼠标事件 | 处理遮罩 | 鼠标移入&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">--1</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">处理遮罩问题最好的方式是设置</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">overlay</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">pointer-events</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">--2</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">鼠标移入是</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-9-aspect-radio-纵横比" tabindex="-1">5.1.9 (aspect-radio) 纵横比 <a class="header-anchor" href="#_5-1-9-aspect-radio-纵横比" aria-label="Permalink to &quot;5.1.9 (aspect-radio) 纵横比&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">div</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">card</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  aspect-ratio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16</span><span style="color:#A6ACCD;"> / </span><span style="color:#F78C6C;">9</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-10-resize-both-overflow-拖动大小" tabindex="-1">5.1.10 (resize: both + overflow)拖动大小 <a class="header-anchor" href="#_5-1-10-resize-both-overflow-拖动大小" aria-label="Permalink to &quot;5.1.10 (resize: both + overflow)拖动大小&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">card</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">resize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> both</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> auto</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;</span><span style="color:#FFCB6B;">div</span><span style="color:#A6ACCD;"> class=&quot;card&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">card&lt;/</span><span style="color:#FFCB6B;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">--1</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">resize需要和overflow结合使用才能生效</span></span>
<span class="line"><span style="color:#A6ACCD;">--2</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">img和table就没办法resize。</span></span></code></pre></div><h3 id="_5-1-10-性能" tabindex="-1">5.1.10.性能 <a class="header-anchor" href="#_5-1-10-性能" aria-label="Permalink to &quot;5.1.10.性能&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">资源压缩</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">异步加载</span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">不要使用@</span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;">，尽量使用link元素，前者页面加载后被加载，后者引入的同时被加载。</span></span>
<span class="line"><span style="color:#A6ACCD;">4.减少重排重绘</span></span>
<span class="line"><span style="color:#A6ACCD;">5.icon图片转成base64编码</span></span>
<span class="line"><span style="color:#A6ACCD;">6.硬件加速（css3的特性）</span></span></code></pre></div><h3 id="_5-1-11-text-overflow" tabindex="-1">5.1.11.text-overflow <a class="header-anchor" href="#_5-1-11-text-overflow" aria-label="Permalink to &quot;5.1.11.text-overflow&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">解决：文本溢出</span></span>
<span class="line"><span style="color:#A6ACCD;">单行：text</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">overflow、overflow</span></span>
<span class="line"><span style="color:#A6ACCD;">多行：使用overflow：hidden截断，并使用伪元素遮住底部文字或者用text</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">overflow</span></span></code></pre></div><h3 id="_5-1-12-shadow-元素" tabindex="-1">5.1.12 shadow 元素 <a class="header-anchor" href="#_5-1-12-shadow-元素" aria-label="Permalink to &quot;5.1.12 shadow 元素&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">我们平常的元素都是 Light tree</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow host</span></span>
<span class="line"><span style="color:#A6ACCD;">一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow bounday</span></span>
<span class="line"><span style="color:#A6ACCD;">Shadow DOM 结束的地方，也是常规 DOM 开始的地方。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow tree</span></span>
<span class="line"><span style="color:#A6ACCD;">Shadow DOM 内部的 DOM 树。</span></span></code></pre></div><h3 id="_5-1-15-filter" tabindex="-1">5.1.15. filter <a class="header-anchor" href="#_5-1-15-filter" aria-label="Permalink to &quot;5.1.15. filter&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">属性（高斯模糊 | 亮度）:</span></span>
<span class="line"><span style="color:#A6ACCD;">可以转化灰度图像  graycale</span></span>
<span class="line"><span style="color:#A6ACCD;">可以调整对比度 contras</span></span>
<span class="line"><span style="color:#A6ACCD;">可以添加高斯模糊 blur</span></span>
<span class="line"><span style="color:#A6ACCD;">透明程度 opacity</span></span></code></pre></div><h3 id="_5-1-16-calc" tabindex="-1">5.1.16.calc <a class="header-anchor" href="#_5-1-16-calc" aria-label="Permalink to &quot;5.1.16.calc&quot;">​</a></h3><p>可以在css中计算尺寸，注意运算符前后保留空格</p><h3 id="_5-1-19-line-height-height" tabindex="-1">5.1.19.line-height | height <a class="header-anchor" href="#_5-1-19-line-height-height" aria-label="Permalink to &quot;5.1.19.line-height | height&quot;">​</a></h3><p>line-height一般针对文字来设置，后者对容器设置</p><h3 id="_5-1-20-渐变阴影的优雅处理" tabindex="-1">5.1.20 渐变阴影的优雅处理 <a class="header-anchor" href="#_5-1-20-渐变阴影的优雅处理" aria-label="Permalink to &quot;5.1.20 渐变阴影的优雅处理&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">使用</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;"> 创建一个伪元素</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">linear-gradient</span><span style="color:#89DDFF;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F78C6C;">45deg</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">hsl</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">300deg</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">),</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">hsl</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">200deg</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">),</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">hsl</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">100deg</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">8px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">filter</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">blur</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">24px</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*放在最下面*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-21-absolute-fixed-float" tabindex="-1">5.1.21.absolute | fixed | float <a class="header-anchor" href="#_5-1-21-absolute-fixed-float" aria-label="Permalink to &quot;5.1.21.absolute | fixed | float&quot;">​</a></h3><p>相同之处在于元素都从文档流删除</p><p>float元素脱离文档流。但是他是在标准文档流中的。因为</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">因为float的元素处于标准文档流中，所以才会影响紧跟后面的元素啊，因为紧跟后面的元素是处在标准文档流中。脱离了文档流，但是没有脱离文本流,</span></span>
<span class="line"><span style="color:#A6ACCD;">元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。</span></span></code></pre></div><p>而绝对定位则是是相对于最近的且不是static定位的父元素来定位，如果没有父级元素，就以根节点</p><p>fixed布局是真正的全局定位</p><h3 id="_5-1-25-js-css-变量" tabindex="-1">5.1.25.js | css 变量 <a class="header-anchor" href="#_5-1-25-js-css-变量" aria-label="Permalink to &quot;5.1.25.js | css 变量&quot;">​</a></h3><p>js里面的常用方法</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> rootElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//获取属性</span></span>
<span class="line"><span style="color:#82AAFF;">getComputedStyle</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getPropertyValue</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">--mode</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">) </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//设置属性</span></span>
<span class="line"><span style="color:#A6ACCD;">rootElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setProperty</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">--count</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">25%</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>css</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">变量的使用</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">root</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    --blue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">xxx</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">调用</span></span>
<span class="line"><span style="color:#A6ACCD;">var(--blue)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">vue里面模块化在css的后面加上module，定义和引入变量</span><span style="color:#89DDFF;font-style:italic;">@value</span></span></code></pre></div><h3 id="_5-1-24-befor-hover-常用伪类" tabindex="-1">5.1.24. :befor | :hover | 常用伪类 <a class="header-anchor" href="#_5-1-24-befor-hover-常用伪类" aria-label="Permalink to &quot;5.1.24. :befor  |  :hover | 常用伪类&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">--1</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">lvha</span><span style="color:#A6ACCD;"> 顺序</span></span>
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">link 未访问的链接</span></span>
<span class="line"><span style="color:#A6ACCD;">    :visted 已经访问的链接</span></span>
<span class="line"><span style="color:#A6ACCD;">    :hover 鼠标移动到链接上</span></span>
<span class="line"><span style="color:#A6ACCD;">    :active 向被激活的元素添加样式</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">before</span><span style="color:#A6ACCD;">/after 最适合也是最推荐的应用就是图形生成</span></span>
<span class="line"><span style="color:#A6ACCD;">nth-child(2n)，</span><span style="color:#FFCB6B;">first-child</span><span style="color:#A6ACCD;">，not</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">n</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;">:可以实现元素的选择，这是把n设置成0，1，2的然后取总体的值，父的子非常神奇。例如</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">style1</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">n+2</span><span style="color:#89DDFF;">)){</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> green</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> 就是包括2以后的不要</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">container</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">red</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">n+2</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">就是要包括2以后的。也就是说css：nth-child(是没有效果的)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">--2</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">注意一下</span></span>
<span class="line"><span style="color:#FFCB6B;">nth-child有一个坑</span><span style="color:#A6ACCD;">，就是在根标签下面用会有奇怪的效果</span></span></code></pre></div><h3 id="_5-1-25-vh-vw-vmin-rem" tabindex="-1">5.1.25.vh | vw | vmin | rem <a class="header-anchor" href="#_5-1-25-vh-vw-vmin-rem" aria-label="Permalink to &quot;5.1.25.vh | vw | vmin | rem&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">em是相对父级元素的大小</span></span>
<span class="line"><span style="color:#A6ACCD;">rem是相对于根元素字体的大小。比如根元素大小是16px（这个一般是默认的大小。现在我们设计稿的尺寸的是48px。那么我们转化成rem就是48/16rem）</span></span>
<span class="line"><span style="color:#A6ACCD;">vmin，vmax是用来适配横屏和竖屏的，vmin是横屏和竖屏中比较小的值</span></span></code></pre></div><h3 id="_5-1-31-temple标签" tabindex="-1">5.1.31 temple标签 <a class="header-anchor" href="#_5-1-31-temple标签" aria-label="Permalink to &quot;5.1.31 temple标签&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">据说是为了语义化才用的。元素不在界面上显示但是可以通过querySelector 和 这个元素content.firstElementChild.cloneNode(true)赋值后进行传参。</span></span>
<span class="line"><span style="color:#A6ACCD;">用法示例</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">template-task</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">task</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">task-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">target</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">_blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">some file name</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">task-progress</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">50%</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> taskTemplate </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#template-task</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> taskDOM </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> taskTemplate</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">firstElementChild</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cloneNode</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> nameDOM </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> taskDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.task-name</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    nameDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">textContent </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> progressDOM </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> taskDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.task-progress</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> progress </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">`${</span><span style="color:#A6ACCD;">task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">progress</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">%</span><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#A6ACCD;">    progressDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">textContent </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> progress</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> TASK_STATUS</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PROCESSING) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">background</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">linear-gradient(to right, #bae7ff </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">progress</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, #fafafa </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">progress</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, #fafafa 100%)</span><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> TASK_STATUS</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">SUCCESS) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">background</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#d9f7be</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">nameDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> TASK_STATUS</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ERROR) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskDOM</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">background</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#ffccc7</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//step2：去到到这里已经组装完，去到实体上复制 taskDOM</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> taskList </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.task-list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 组装id</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> taskBox </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> taskList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">#task-</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#89DDFF;">}`</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 这里是进度条</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">taskBox) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskBox</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskBox</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">task-</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">task</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#89DDFF;">}`</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">taskList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">prepend</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">taskBox</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//append也可以添加dom元素，第一次见</span></span>
<span class="line"><span style="color:#A6ACCD;">    taskBox</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    taskBox</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">append</span><span style="color:#A6ACCD;">(taskDOM)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_5-1-32-scroll-snap-type-滚动贴合-轮播图" tabindex="-1">5.1.32 scroll-snap-type(滚动贴合+轮播图) <a class="header-anchor" href="#_5-1-32-scroll-snap-type-滚动贴合-轮播图" aria-label="Permalink to &quot;5.1.32 scroll-snap-type(滚动贴合+轮播图)&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">父元素中 </span></span>
<span class="line"><span style="color:#A6ACCD;">scroll-snap-type: y mandatory;</span></span>
<span class="line"><span style="color:#A6ACCD;">/* 需要把滚动条设置到直接父容器，</span></span>
<span class="line"><span style="color:#A6ACCD;">scroll-snap-type 才能生效，</span></span>
<span class="line"><span style="color:#A6ACCD;">默认是在 body 上，现在是 main 上 */</span></span>
<span class="line"><span style="color:#A6ACCD;">overflow: scroll;</span></span>
<span class="line"><span style="color:#A6ACCD;">height: 100vh;</span></span>
<span class="line"><span style="color:#A6ACCD;">然后子元素就</span></span>
<span class="line"><span style="color:#A6ACCD;">height:100vh</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">CSS Scroll Snap 垂直</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> hidden</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">/* 核心样式 */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">scroll-snap-type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> y mandatory</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;">/* 需要把滚动条设置到直接父容器，</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">                scroll-snap-type 才能生效，</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">                默认是在 body 上，现在是 main 上 */</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> scroll</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page2</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page0</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page4</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">96vw</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">scroll-snap-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> grid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">place-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2em</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">switch</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">switchButton</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">container</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switch</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面一</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面二</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面三</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面四</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面五（上下滚动也行）</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.switch</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAttribute</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.page</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">scrollIntoView</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                behavior</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">smooth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#676E95;font-style:italic;">// 平滑过渡</span></span>
<span class="line"><span style="color:#F07178;">                block</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">start</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//垂直方向的对齐</span></span>
<span class="line"><span style="color:#F07178;">                inline</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">start</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_5-1-33-子元素触动父元素" tabindex="-1">5.1.33 子元素触动父元素 <a class="header-anchor" href="#_5-1-33-子元素触动父元素" aria-label="Permalink to &quot;5.1.33 子元素触动父元素&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">子元素触动后，父元素变化</span></span>
<span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">has</span><span style="color:#89DDFF;">(.</span><span style="color:#FFCB6B;">shell</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rgb</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">240</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">!important</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-34-动画的暂停-和-恢复" tabindex="-1">5.1.34 动画的暂停 和 恢复 <a class="header-anchor" href="#_5-1-34-动画的暂停-和-恢复" aria-label="Permalink to &quot;5.1.34 动画的暂停 和 恢复&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#B2CCD6;">animation</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> rotate </span><span style="color:#F78C6C;">20s</span><span style="color:#A6ACCD;">  linear paused infinite</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#B2CCD6;">animation-play-state</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> running </span><span style="color:#676E95;font-style:italic;">/*paused*/</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-35-加载字体" tabindex="-1">5.1.35 加载字体 <a class="header-anchor" href="#_5-1-35-加载字体" aria-label="Permalink to &quot;5.1.35  加载字体&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">0</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">使用</span></span>
<span class="line"><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">face </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">family</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">led</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">url</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">DS-DIGI.TTF</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">card</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">panel</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">num </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">family</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">led</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">size</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 25</span><span style="color:#A6ACCD;">px</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">简单优化</span></span>
<span class="line"><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">face </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">family</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sans-medium</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">url</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">./</span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">NotoSansSC</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Medium</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">otf</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#676E95;font-style:italic;">/*表示文档不会block(极短的阻塞期&lt; 1s)，直接使用备选字体，远程字体下载完毕后再进行替换。*/</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">swap</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">分块加载（</span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//github.com/HoPGoldy/google-font-splitter）</span></span>
<span class="line"><span style="color:#A6ACCD;">浏览器只会在页面使用了该范围中的字符时才会加载对应的字体“分片”。也就是说页面初始化时给浏览器一个目录，在页面要渲染字体时再去根据目录加载所需的字体文件。这不就是字体文件的按需加载</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">类似与这样</span></span>
<span class="line"><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">face </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">family</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sans-regular</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">normal</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">weight</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">400</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">swap</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">url</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">s</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">notosanssc</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">v26</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">k3kXo84MPvpLmixcA63oeALhLOCT</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xWNm8Hqd37g1OkDRZe7lR4sg1IzSy</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">MNbE9VH8V</span><span style="color:#89DDFF;">.</span><span style="color:#F07178;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">woff2</span><span style="color:#F07178;">)</span><span style="color:#82AAFF;">format</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">woff2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">unicode</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">range</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f1e9</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f1f5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f1f7</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f1ff</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f21a</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f232</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f234</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f237</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f250</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f251</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f300</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f302</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f308</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f30a</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f311</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f315</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f319</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f320</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f324</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f327</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f32a</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f32c</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f32d</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f330</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f357</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">U</span><span style="color:#89DDFF;">+</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f359</span><span style="color:#89DDFF;">-</span><span style="color:#F07178;">1</span><span style="color:#A6ACCD;">f37e</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-1-36-flex布局" tabindex="-1">5.1.36 Flex布局 <a class="header-anchor" href="#_5-1-36-flex布局" aria-label="Permalink to &quot;5.1.36 Flex布局&quot;">​</a></h3><h4 id="_5-12-0-flex-direction-排列方式" tabindex="-1">5.12.0 flex-direction(排列方式) <a class="header-anchor" href="#_5-12-0-flex-direction-排列方式" aria-label="Permalink to &quot;5.12.0 flex-direction(排列方式)&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">row 横着排列（列） </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">column 竖着排列（行）</span></span></code></pre></div><h4 id="_5-1-36-1-align-items-竖轴对齐-justify-content-横轴对齐" tabindex="-1">5.1.36.1 align-items(竖轴对齐) | justify-content (横轴对齐) <a class="header-anchor" href="#_5-1-36-1-align-items-竖轴对齐-justify-content-横轴对齐" aria-label="Permalink to &quot;5.1.36.1 align-items(竖轴对齐) |  justify-content (横轴对齐)&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">start</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">end</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> :朝左</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">右对齐</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> space</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">evenly</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">space</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">between ：平分空间</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">两端对齐</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">居中</span></span></code></pre></div><h4 id="_5-1-36-2-flex的属性" tabindex="-1">5.1.36.2 flex的属性 <a class="header-anchor" href="#_5-1-36-2-flex的属性" aria-label="Permalink to &quot;5.1.36.2 flex的属性&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">flex的属性：放大，缩小，本身。</span></span>
<span class="line"><span style="color:#A6ACCD;">flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">basis</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">grow和flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">shrink。</span></span>
<span class="line"><span style="color:#A6ACCD;">可以按照flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">grow</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">shrink</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">flex</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">basis的顺序使用flex简写属性</span></span></code></pre></div><h3 id="_5-1-37-grid布局" tabindex="-1">5.1.37 Grid布局 <a class="header-anchor" href="#_5-1-37-grid布局" aria-label="Permalink to &quot;5.1.37 Grid布局&quot;">​</a></h3><h4 id="_5-1-37-1-grid-template-columns-横向" tabindex="-1">5.1.37.1 grid-template-columns(横向) <a class="header-anchor" href="#_5-1-37-1-grid-template-columns-横向" aria-label="Permalink to &quot;5.1.37.1  grid-template-columns(横向)&quot;">​</a></h4><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">//3个一行的布局 ，也可以用fr来进行布局，类似于百分比</span></span>
<span class="line"><span style="color:#FFCB6B;">grid-template-columns</span><span style="color:#A6ACCD;">: 100px 100px 100px;</span></span></code></pre></div><h4 id="_5-1-37-2-grid-gap-间隔" tabindex="-1">5.1.37.2 grid-gap(间隔) <a class="header-anchor" href="#_5-1-37-2-grid-gap-间隔" aria-label="Permalink to &quot;5.1.37.2 grid-gap(间隔)&quot;">​</a></h4><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/*行之间间隙10px ，列之间间隔0px*/</span></span>
<span class="line"><span style="color:#FFCB6B;">grid-gap</span><span style="color:#A6ACCD;">:10px 0px;</span></span></code></pre></div><h4 id="_5-1-37-3-grid-area-grid-template-areas-范围" tabindex="-1">5.1.37.3 grid-area | grid-template-areas(范围) <a class="header-anchor" href="#_5-1-37-3-grid-area-grid-template-areas-范围" aria-label="Permalink to &quot;5.1.37.3 grid-area | grid-template-areas(范围)&quot;">​</a></h4><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> grid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">grid-template-areas</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">header header header</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sidebar content content</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">footer footer footer</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">/*然后制定一下header sidebar content 和 footer*/</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">header</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">grid-area</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> header</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">98%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#B2CCD6;">grid-area</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> header</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h4 id="_5-1-37-4-align-items-竖轴对齐-justify-content-横轴对齐" tabindex="-1">5.1.37.4 align-items(竖轴对齐) | justify-content (横轴对齐) <a class="header-anchor" href="#_5-1-37-4-align-items-竖轴对齐-justify-content-横轴对齐" aria-label="Permalink to &quot;5.1.37.4 align-items(竖轴对齐) |  justify-content (横轴对齐)&quot;">​</a></h4><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">align-items</span><span style="color:#A6ACCD;">: center/end/</span><span style="color:#FFCB6B;">space-between</span><span style="color:#A6ACCD;">;</span></span></code></pre></div><h3 id="_5-1-38-css写错会怎么样" tabindex="-1">5.1.38 css写错会怎么样 <a class="header-anchor" href="#_5-1-38-css写错会怎么样" aria-label="Permalink to &quot;5.1.38  css写错会怎么样&quot;">​</a></h3><p>不管他，继续解析下一个css样式</p><h3 id="_5-1-39-包含块" tabindex="-1">5.1.39 包含块 <a class="header-anchor" href="#_5-1-39-包含块" aria-label="Permalink to &quot;5.1.39 包含块&quot;">​</a></h3><p>包含快 是一个 排列区域。一个父盒子 有四个盒子 margin | padding | border | content</p><ul><li>float 或者常规元素: 包含快是 父盒子的 content</li><li>abolution绝对定位元素：包含快 是 外层定位元素的padding 区域</li></ul><h2 id="_5-2-快问快答-效果实现" tabindex="-1">5.2 快问快答（效果实现） <a class="header-anchor" href="#_5-2-快问快答-效果实现" aria-label="Permalink to &quot;5.2 快问快答（效果实现）&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css的属性选择符是从左到右还是从右到左？</span></span>
<span class="line"><span style="color:#A6ACCD;">从右到左，因为这样能够比较快的定位元素</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">如何减少回流和重绘？</span></span>
<span class="line"><span style="color:#A6ACCD;">尽量用class、少用内联样式</span></span>
<span class="line"><span style="color:#A6ACCD;">避免使用table布局</span></span>
<span class="line"><span style="color:#A6ACCD;">动画效果设置绝对布局，使其脱离文档流，从而减少对其他元素的影响</span></span>
<span class="line"><span style="color:#A6ACCD;">动态插入节点时，使用DocumentFragment</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">毛玻璃效果怎么实现？</span></span>
<span class="line"><span style="color:#A6ACCD;">这玩意其实就是用到filter的blur（高斯模糊）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么图片是行内元素还可以设置宽高？</span></span>
<span class="line"><span style="color:#A6ACCD;">图片是可替换元素，可替换元素的内容不受css影响，css只能影响他的位置但不能影响可替换自身内容，和inline</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">block一样。</span></span>
<span class="line"><span style="color:#A6ACCD;">典型的可替换元素 有iframe，video，img，input</span></span></code></pre></div><h3 id="_5-2-1-清除浮动方法" tabindex="-1">5.2.1 清除浮动方法 <a class="header-anchor" href="#_5-2-1-清除浮动方法" aria-label="Permalink to &quot;5.2.1 清除浮动方法&quot;">​</a></h3><p>在浮动元素后加一个css属性clear为both的空元素 父元素添加overflow：hidden或者auto变成一个BFC</p><h3 id="_5-2-2-视觉滚动效果" tabindex="-1">5.2.2 视觉滚动效果 <a class="header-anchor" href="#_5-2-2-视觉滚动效果" aria-label="Permalink to &quot;5.2.2 视觉滚动效果&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">attachment</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//设置背景图像是否固定或者随着页面的其余部分滚动。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//scroll 背景图片随着页面的滚动而滚动，这是默认的。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//fixed 背景图片不会随着页面的滚动而滚动。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//local 背景图片会随着元素内容的滚动而滚动。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//initial 设置该属性的默认值。 阅读关于 initial 内容</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容</span></span></code></pre></div><h3 id="_5-2-3-画三角形效果" tabindex="-1">5.2.3.画三角形效果 <a class="header-anchor" href="#_5-2-3-画三角形效果" aria-label="Permalink to &quot;5.2.3.画三角形效果&quot;">​</a></h3><p>利用border-width，border-color和width设置成0可以分别设置四部分样式</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">border</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">solid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> transparent transparent </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">d9534f</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">border</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">after</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">solid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">40px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">40px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> transparent transparent </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">96ceb4</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-2-4-实现两栏布局-效果" tabindex="-1">5.2.4 实现两栏布局 效果 <a class="header-anchor" href="#_5-2-4-实现两栏布局-效果" aria-label="Permalink to &quot;5.2.4 实现两栏布局 效果&quot;">​</a></h3><p>右边自适应？三栏布局中间自适应？</p><ul><li>两栏布局1：左边栏左浮动，右边栏用marin-left撑出内容展示，父元素生成BFC防止下方元素飞到上方内容</li><li>两栏布局2：设置右边栏flex为1</li><li>三栏布局1：两边float，中间使用margin把空间留出来给左右栏（要把中间的div写在html最后位置）</li><li>三栏布局2：两边绝对布局，中间使用margin把空间留出来给左右栏</li><li>三栏布局3：父元素flex布局，设置justify-content: space-between，左右设置宽度，中间设置宽度100%</li></ul><h3 id="_5-2-5-实现父子元素absolution的宽高相等" tabindex="-1">5.2.5 实现父子元素absolution的宽高相等 <a class="header-anchor" href="#_5-2-5-实现父子元素absolution的宽高相等" aria-label="Permalink to &quot;5.2.5 实现父子元素absolution的宽高相等&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">q：父元素是一个flex，子元素是一个absolution。当时怎么样也对不齐</span></span>
<span class="line"><span style="color:#A6ACCD;">s：最后的解决方法是把父元素添加一个position: relative;</span></span></code></pre></div><h3 id="_5-2-6-实现居中" tabindex="-1">5.2.6.实现居中 <a class="header-anchor" href="#_5-2-6-实现居中" aria-label="Permalink to &quot;5.2.6.实现居中&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;"> 绝对定位</span><span style="color:#89DDFF;">+</span><span style="color:#FFCB6B;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> auto </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> top</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">bottom</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">left</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">right</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">绝对定位50</span><span style="color:#89DDFF;">%</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50</span><span style="color:#89DDFF;">%+</span><span style="color:#FFCB6B;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#82AAFF;">translate</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">50</span><span style="color:#89DDFF;">%,-</span><span style="color:#F78C6C;">50</span><span style="color:#89DDFF;">%</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flex布局</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">父元素justify</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">父元素align</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">items</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">place</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">items 作为 </span><span style="color:#82AAFF;">center</span><span style="color:#A6ACCD;">(place</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">items 设置成start end 右上)</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">grid </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">grid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">place</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">items</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">height</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 100</span><span style="color:#A6ACCD;">vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-2-7-实现sticky" tabindex="-1">5.2.7.实现sticky <a class="header-anchor" href="#_5-2-7-实现sticky" aria-label="Permalink to &quot;5.2.7.实现sticky&quot;">​</a></h3><p>可以通过observeraction监控元素，超过范围后设置成fixed布局</p><h3 id="_5-2-8-高z-index的容器空白处点击事件被吸收的问题处理" tabindex="-1">5.2.8.高z-index的容器空白处点击事件被吸收的问题处理 <a class="header-anchor" href="#_5-2-8-高z-index的容器空白处点击事件被吸收的问题处理" aria-label="Permalink to &quot;5.2.8.高z-index的容器空白处点击事件被吸收的问题处理&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">例如地图组件中间我们加上几个按钮，然后中间会有一些地方被连接，被连接的地方点不了触发不了下面的事件。也就是事件被吸收了</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">solution：</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">整体的dom设置成 pointer</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">events</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">none</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dom 下面的事件我们设置成  pointer</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">events</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">auto</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">或者是 </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">把整体的dom 的height 设置成 </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">，因为其他的button 的</span></span></code></pre></div><h3 id="_5-2-9-对齐问题" tabindex="-1">5.2.9 对齐问题 <a class="header-anchor" href="#_5-2-9-对齐问题" aria-label="Permalink to &quot;5.2.9 对齐问题&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">img 的对齐是baseline</span></span></code></pre></div><h3 id="_5-2-10-滚动贴合-轮播图" tabindex="-1">5.2.10 滚动贴合 + 轮播图 <a class="header-anchor" href="#_5-2-10-滚动贴合-轮播图" aria-label="Permalink to &quot;5.2.10 滚动贴合 + 轮播图&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">CSS Scroll Snap 垂直</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> hidden</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">/* 核心样式 */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">scroll-snap-type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> y mandatory</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;">/* 需要把滚动条设置到直接父容器，</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">                scroll-snap-type 才能生效，</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">                默认是在 body 上，现在是 main 上 */</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> scroll</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page2</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page0</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">page4</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">96vw</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">scroll-snap-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> grid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">place-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2em</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">switch</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">switchButton</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">container</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switch</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">switchButton</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">⚫</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面一</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面二</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面三</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面四</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">page4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">页面五（上下滚动也行）</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.switch</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAttribute</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.page</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">scrollIntoView</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                behavior</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">smooth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#676E95;font-style:italic;">// 平滑过渡</span></span>
<span class="line"><span style="color:#F07178;">                block</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">start</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//垂直方向的对齐</span></span>
<span class="line"><span style="color:#F07178;">                inline</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">start</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="_5-3-css手写题" tabindex="-1">5.3 CSS手写题 <a class="header-anchor" href="#_5-3-css手写题" aria-label="Permalink to &quot;5.3 CSS手写题&quot;">​</a></h2><h3 id="_5-5-1-实现一个从下到上动画的模态窗" tabindex="-1">5.5.1.实现一个从下到上动画的模态窗 <a class="header-anchor" href="#_5-5-1-实现一个从下到上动画的模态窗" aria-label="Permalink to &quot;5.5.1.实现一个从下到上动画的模态窗&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zh-cn</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">  &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;font-style:italic;">@keyframes</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">frames</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">0%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">translateY</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">100%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">translateY</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">handleClick</span><span style="color:#C3E88D;">()</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">dialog</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:100px;height:100px;border: 1px solid;display: none;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">handleHidden</span><span style="color:#C3E88D;">()</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">float: right;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">取消</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">  &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handleClick</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dialog</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dialog</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">dialog</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">block</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">dialog</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">animation</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">frames 3s</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handleHidden</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dialog</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_5-5-2-实现手风琴" tabindex="-1">5.5.2 实现手风琴 <a class="header-anchor" href="#_5-5-2-实现手风琴" aria-label="Permalink to &quot;5.5.2 实现手风琴&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">主要是用到了：check这个伪类</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">垂直手风琴</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">&lt;!-- 事先引入好的字体图标库 源码会放在简介 自行下载即可 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">css/font-awesome.min.css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">css/index.css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">	&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#FFCB6B;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* 页面初始化 清除元素原有的内外边距 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* 盒子模型 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">box-sizing</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> border-box</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">/* :not()选择器选取的是除括号里的元素以外的其它元素 :first-child选择器是第一个元素 */</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">accordion</span><span style="color:#89DDFF;">&gt;</span><span style="color:#FFCB6B;">li</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(:</span><span style="color:#C792EA;">first-child</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">label</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">border-top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> solid </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">38814d</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#FFCB6B;">li</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">label</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#FFCB6B;">li</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ol</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">333</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">/* 逻辑 */</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#FFCB6B;">li</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">input</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* 将单选按钮隐藏起来 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* display: none; */</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#FFCB6B;">li</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">label</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* 相对定位 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* label元素是行内元素 需要将其转为块级元素 才能设置宽度和高度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> block</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">5fb878</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">text_item</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">padding-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">/* 加过渡 */</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">transition</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> all </span><span style="color:#F78C6C;">0.5s</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">radio_item</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">checked</span><span style="color:#89DDFF;">~.</span><span style="color:#FFCB6B;">text</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">text_item</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">accordion</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">&lt;!-- 单选框的id属性值和label 元素的for属性值相同时,就可以通过label</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">				元素来选中单选框, 每个单选框都有一个相同name属性 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">&lt;!-- 这个属性主要作用是用来将单选框分类的,当每个name属性值相同时,那么这一组单选框就只能同时选中一个 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;&lt;</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">一级标题1</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">i</span></span>
<span class="line"><span style="color:#89DDFF;">					</span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">fa fa-caret-right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">i</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题1</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题2</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;&lt;</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">一级标题2</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">i</span></span>
<span class="line"><span style="color:#89DDFF;">					</span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">fa fa-caret-right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">i</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题1</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题2</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题3</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;&lt;</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">一级标题3</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">i</span></span>
<span class="line"><span style="color:#89DDFF;">					</span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">fa fa-caret-right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">i</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">				</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text_item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">二级标题1</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">ol</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="_5-4-svg原理-icon-实操" tabindex="-1">5.4 svg原理 | icon 实操 <a class="header-anchor" href="#_5-4-svg原理-icon-实操" aria-label="Permalink to &quot;5.4 svg原理 | icon 实操&quot;">​</a></h2><h3 id="_5-4-1重要的属性" tabindex="-1">5.4.1重要的属性 <a class="header-anchor" href="#_5-4-1重要的属性" aria-label="Permalink to &quot;5.4.1重要的属性&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">y</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">fill</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">stroke</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> stroke</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">width，stroke</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">opacity</span></span>
<span class="line"><span style="color:#A6ACCD;">transform：translate（</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">，</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">）</span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> scale（</span><span style="color:#F78C6C;">0.1</span><span style="color:#A6ACCD;">，</span><span style="color:#F78C6C;">0.1</span><span style="color:#A6ACCD;">） ，</span></span>
<span class="line"><span style="color:#A6ACCD;">transform</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">origin：center</span></span>
<span class="line"><span style="color:#A6ACCD;">transform</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">box：fill</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">box </span><span style="color:#676E95;font-style:italic;">//使用对象边界框作为参考框，要是不设置这个属性可能会将最近的svg视口作为标准</span></span></code></pre></div><h3 id="_5-4-2重要的标签" tabindex="-1">5.4.2重要的标签 <a class="header-anchor" href="#_5-4-2重要的标签" aria-label="Permalink to &quot;5.4.2重要的标签&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">polyline.points | stroke(折线图)，polygon.points（乱七八糟的东西），text.x.y（文字），line（折线图）fill | stroke</span></span></code></pre></div><h3 id="_5-4-3-基础示例" tabindex="-1">5.4.3 基础示例 <a class="header-anchor" href="#_5-4-3-基础示例" aria-label="Permalink to &quot;5.4.3 基础示例&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">svgItem</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> aqua</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">animate</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">animation</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> move_right </span><span style="color:#F78C6C;">1.1s</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">cubic-bezier</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> infinite</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;font-style:italic;">@keyframes</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">move_right</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">0%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-140px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">100%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">999</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第一步：定义：绘制时所占用的空间大小,0 0 表示x轴和y有的起始位置,即可视区View中哪个位置开始显示（可见） --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 后面100 100表示长和宽但是只是一个数量，不会有具体的长度.这里的100只是表示一个比例关系 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">svg</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">viewBox</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0 0 100 100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">svgItem animate</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制矩形,在y为1/10的时候进行绘制 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;rect x=&quot;0&quot; y=&quot;10&quot; width=&quot;10&quot; height=&quot;10&quot;&gt;&lt;/rect&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制三角形 双数分别代表着x，y，单数则是不出现东西 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;polygon points=&quot;0,10,10,10,0,0&quot;&gt;&lt;/polygon&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制圆形 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">circle</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">cx</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">45</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">cy</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">45</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">r</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">5</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">animate</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">circle</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制线段 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;line stroke=&quot;black&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;20&quot; y2=&quot;0&quot; stroke-width=&quot;10&quot;&gt;&lt;/line&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制折线 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">polyline</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">points</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0,0,10,10,15,20</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">fill</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">transparent</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">stroke</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">black</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">stroke-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">polyline</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- 第二步：绘制文字 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;text x=&quot;10&quot; y=&quot;60&quot; style=&quot;font-size: 24&quot;&gt;hello &lt;/text&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!-- g标签可以加一个组 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">svg</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_5-4-5-unicode-引入icon" tabindex="-1">5.4.5 unicode | 引入icon <a class="header-anchor" href="#_5-4-5-unicode-引入icon" aria-label="Permalink to &quot;5.4.5 unicode | 引入icon&quot;">​</a></h3><p>直接添加多色图标会自动去色（因为是当作字体来用的）</p><p>Unicode 书写不直观，语意不明确的问题。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;">@font</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">face ，和</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">iconfont引入</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">在span标签中添加</span><span style="color:#89DDFF;">&amp;</span><span style="color:#A6ACCD;">#x33，class添加xxxx。</span></span>
<span class="line"><span style="color:#A6ACCD;">像</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">span class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconfont</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&amp;</span><span style="color:#A6ACCD;">#x33</span><span style="color:#89DDFF;">;&lt;/</span><span style="color:#A6ACCD;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> 引入</span></span></code></pre></div><h3 id="_5-4-6-font-class-引入icon" tabindex="-1">5.4.6 font class | 引入icon <a class="header-anchor" href="#_5-4-6-font-class-引入icon" aria-label="Permalink to &quot;5.4.6 font class  | 引入icon&quot;">​</a></h3><p>本质上还是使用的字体，所以多色图标还是不支持的。</p><p>语意明确，书写更直观</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">拷贝css代码 </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> .css</span></span>
<span class="line"><span style="color:#A6ACCD;">2.挑选图标并且获取类型，应用于页面&lt;i class=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconfont icon-xxx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">&gt;&lt;/i&gt;</span></span></code></pre></div><h3 id="_5-4-7-symbol-引入icon" tabindex="-1">5.4.7 symbol | 引入icon <a class="header-anchor" href="#_5-4-7-symbol-引入icon" aria-label="Permalink to &quot;5.4.7 symbol  | 引入icon&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">原理：symbol元素用来定义一个图形模板对象，它可以用一个use元素实例化。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">symbol元素对图形的作用是在同一文档中多次使用，只有use才能够实现</span></span></code></pre></div><p>支持多色图标</p><p>支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</p><p>注意一下，阿里iconfont的一些图表去色后（去色是为了）</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">引入js代码 iconfont</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js，别的都丢掉都可以</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">引入css代码</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    .icon </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">       width: 1em; height: 1em;</span></span>
<span class="line"><span style="color:#A6ACCD;">       vertical</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">align: </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">0</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">15em;</span></span>
<span class="line"><span style="color:#A6ACCD;">       fill: currentColor;</span></span>
<span class="line"><span style="color:#A6ACCD;">       overflow: hidden;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">类似于</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">svg</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">icon svg-icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">aria-hidden</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">use</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">xlink</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#icon-jijin</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">svg</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">svg</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">icon svg-icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">aria-hidden</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">use</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">xlink</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#icon-cunkuan</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">svg</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="_5-5-动画动效" tabindex="-1">5.5 动画动效 <a class="header-anchor" href="#_5-5-动画动效" aria-label="Permalink to &quot;5.5 动画动效&quot;">​</a></h2><p>以后慢慢完善</p><h3 id="_5-5-1-gif-多用" tabindex="-1">5.5.1 gif(多用) <a class="header-anchor" href="#_5-5-1-gif-多用" aria-label="Permalink to &quot;5.5.1  gif(多用)&quot;">​</a></h3><p>这个对于技术来说最简单，本质还是和png、jpg一样，就是个图片，大多数网站都会使用这个经济、有效、简单的方法。设计师导出方便，技术用的舒服。不过注意体积不宜过大。</p><p>但是有个致命缺点：gif图是不支持alpha透明度的.只支持<a href="https://www.zhihu.com/search?q=%E7%B4%A2%E5%BC%95%E9%80%8F%E6%98%8E%E5%BA%A6&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A547326433%7D" target="_blank" rel="noreferrer">索引透明度</a>，也就是只会显示全透明和不透明，导致出现杂边，尤其是做透明的不规则的gif。所以gif在网站上一般会加个底图来展示，以遮盖毛边。</p><h3 id="_5-5-2-png序列帧动画-少用" tabindex="-1">5.5.2 png序列帧动画(少用) <a class="header-anchor" href="#_5-5-2-png序列帧动画-少用" aria-label="Permalink to &quot;5.5.2 png序列帧动画(少用)&quot;">​</a></h3><p>这个方法网页端和APP都适用，技术也推荐，性能没问题。本质就是动画的基础原理，一个一个展示，速度快了就成了动画。</p><h3 id="_5-5-3-lottie动画" tabindex="-1">5.5.3 Lottie动画 <a class="header-anchor" href="#_5-5-3-lottie动画" aria-label="Permalink to &quot;5.5.3  Lottie动画&quot;">​</a></h3><p>Lottie是Airbnb开源的动画项目，支持Android、iOS、ReactNaitve三大平台，网页也可以。</p><p>对设计师来说，就是在AE上使用bodymovin插件，导出动画json文件给技术，技术调用lottie的代码来实现动画。动画非常流畅，效果也很惊艳。</p><p>不过需要注意的是<a href="https://link.zhihu.com/?target=https%3A//airbnb.design/introducing-lottie/" target="_blank" rel="noreferrer">Lottie</a>动画在AE里面只能用<a href="https://www.zhihu.com/search?q=%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BD%A2&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A547326433%7D" target="_blank" rel="noreferrer">矢量图形</a>制作，如果用图片素材就不行了，本质上是把AE可视化的代码，转换成<a href="https://www.zhihu.com/search?q=json%E6%96%87%E4%BB%B6&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A547326433%7D" target="_blank" rel="noreferrer">json文件</a>。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">https://airbnb.design/introducing-lottie/</span></span></code></pre></div><h3 id="_5-5-4-css动画实例" tabindex="-1">5.5.4 css动画实例 <a class="header-anchor" href="#_5-5-4-css动画实例" aria-label="Permalink to &quot;5.5.4 css动画实例&quot;">​</a></h3><p>可以看作是是animation的简化版本</p><ol><li><p>transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；一次性，不能重复发生，除非一再触发</p></li><li><p>animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。</p></li></ol><h3 id="_5-5-4-1-keyframes-animation-name-duration-fill-mode" tabindex="-1">5.5.4.1 keyframes | animation-name/duration/fill-mode <a class="header-anchor" href="#_5-5-4-1-keyframes-animation-name-duration-fill-mode" aria-label="Permalink to &quot;5.5.4.1 keyframes | animation-name/duration/fill-mode&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">css的效果，谁想用就 document.querySector(&#39;xxxx&#39;)</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">classList</span><span style="color:#A6ACCD;">.toggle(&#39;move_right&#39;)就可以了</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@keyframes</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">move_right</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">0%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-140px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">100%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">999</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">animate</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*animationm默认传参传2个*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">animation-name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> move_right</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">animation-duration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.1s</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*第三个参数是运动曲线*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">animation-timing-function</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">cubic-bezier</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*第四个参数是重复次数*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  	</span><span style="color:#B2CCD6;">animation-iteration-count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> infinite</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#676E95;font-style:italic;">/*动画完成时,是显示动画开始的状态还是结束时的状态。*/</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*forwards：结束态。backwards：开始态*/</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">animation-fill-mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> forwards</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*上面的animate跟下面的效果一样*/</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">animate</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">animation</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> move_right </span><span style="color:#F78C6C;">1.1s</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">cubic-bezier</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> infinite</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-5-4-2-transition-hover示例" tabindex="-1">5.5.4.2 transition(hover示例) <a class="header-anchor" href="#_5-5-4-2-transition-hover示例" aria-label="Permalink to &quot;5.5.4.2  transition(hover示例)&quot;">​</a></h3><p>可以看作是是animation的简化版本</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">transition: property duration </span><span style="color:#FFCB6B;">timing-function</span><span style="color:#A6ACCD;"> delay;</span></span>
<span class="line"><span style="color:#A6ACCD;">注意一下，如果这个 transition 放在没有触发事件（hover）的里面的话，我们就会在不执行的时候，慢慢收回去。放在了</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;">:hover这里面他就会一下子收回去</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> lightpink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">transition</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> all </span><span style="color:#F78C6C;">1s</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5s</span><span style="color:#A6ACCD;"> ease-in-out</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_5-6-滚动条样式" tabindex="-1">5.6 滚动条样式 <a class="header-anchor" href="#_5-6-滚动条样式" aria-label="Permalink to &quot;5.6 滚动条样式&quot;">​</a></h2><h3 id="_5-6-1-箭头-scrollbar-button" tabindex="-1">5.6.1 箭头 | scrollbar-button <a class="header-anchor" href="#_5-6-1-箭头-scrollbar-button" aria-label="Permalink to &quot;5.6.1  箭头 | scrollbar-button&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-button</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-6-2-可以拖动的滑块-scrollbar-thumb" tabindex="-1">5.6.2 可以拖动的滑块 | scrollbar-thumb <a class="header-anchor" href="#_5-6-2-可以拖动的滑块-scrollbar-thumb" aria-label="Permalink to &quot;5.6.2 可以拖动的滑块 |  scrollbar-thumb&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-thumb</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">32px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-6-3-滑块正上下的元素-scrollbar-track-piece" tabindex="-1">5.6.3 滑块正上下的元素 | scrollbar-track-piece <a class="header-anchor" href="#_5-6-3-滑块正上下的元素-scrollbar-track-piece" aria-label="Permalink to &quot;5.6.3 滑块正上下的元素 |  scrollbar-track-piece&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-track-piece</span><span style="color:#89DDFF;">{</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-6-4整个轨道-scrollbar" tabindex="-1">5.6.4整个轨道 | scrollbar <a class="header-anchor" href="#_5-6-4整个轨道-scrollbar" aria-label="Permalink to &quot;5.6.4整个轨道  |  scrollbar&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">/* 对应纵向滚动条的宽度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* 对应横向滚动条的宽度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_5-6-5-纯色示例-2-4" tabindex="-1">5.6.5 纯色示例(.2+.4) <a class="header-anchor" href="#_5-6-5-纯色示例-2-4" aria-label="Permalink to &quot;5.6.5 纯色示例(.2+.4)&quot;">​</a></h3><img src="/front-base-know-blog/assets/scoll.6f592f75.png"><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">body</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">word-wrap</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> break-word</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">/*  */</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;">/* 对应纵向滚动条的宽度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;">/* 对应横向滚动条的宽度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">dbeffd</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-thumb</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">32px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    ssssssssssss</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">这样也可以</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* 总 */</span></span>
<span class="line"><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* 滚动条宽 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">eee</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* 样式 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-thumb</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* 滚动条 拖动条 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rgba</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">.2</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_5-6-6-火狐示例" tabindex="-1">5.6.6 火狐示例 <a class="header-anchor" href="#_5-6-6-火狐示例" aria-label="Permalink to &quot;5.6.6 火狐示例&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">*</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* 1.宽度 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">scrollbar-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> thin</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* 2.颜色 第一个滚轮颜色，第二个滚动条背景色 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">scrollbar-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rgb</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">90</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">105</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">195</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">eee</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_5-7-css-工程化" tabindex="-1">5.7 css 工程化 <a class="header-anchor" href="#_5-7-css-工程化" aria-label="Permalink to &quot;5.7 css 工程化&quot;">​</a></h2><h3 id="_5-7-1-预处理器" tabindex="-1">5.7.1 预处理器 <a class="header-anchor" href="#_5-7-1-预处理器" aria-label="Permalink to &quot;5.7.1 预处理器&quot;">​</a></h3><p>解决了模块化开发和嵌套书写的维护问题</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Less、</span><span style="color:#FFCB6B;">Sass和Stylus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">解决了模块化开发和嵌套书写的维护问题</span></span></code></pre></div><h3 id="_5-7-2-命名-oocss-bem-smacss" tabindex="-1">5.7.2 命名 | oocss | bem | smacss <a class="header-anchor" href="#_5-7-2-命名-oocss-bem-smacss" aria-label="Permalink to &quot;5.7.2 命名 | oocss | bem | smacss&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Oriented </span><span style="color:#82AAFF;">CSS</span><span style="color:#A6ACCD;">(css面向对象)：主要有两个规则</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> Separate structure and skin（结构和皮肤分离）：结构指的是一个东西的大小和定位。皮肤指的是color，gradient之类的。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.2</span><span style="color:#A6ACCD;"> Separate container and content（内容和容器分离）：目前是我最喜欢的（这样子会增加类）。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BEM 类似于search</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">form__input</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.1</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">block</span><span style="color:#A6ACCD;">(您希望将样式范围限定到的 HTML 块) </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.2</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">element</span><span style="color:#A6ACCD;">(block__elementOne)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.3</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">modifier</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">block__elementOne</span><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">modifier)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.4</span><span style="color:#A6ACCD;"> __分隔块和元素。</span><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">分隔元素 和修饰器</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">我想大多数人都觉得 BEM 的破折号和下划线看起来很奇怪，所以真是项目中很少有严格遵守 BEM 规范的 CSS 代码出现，往往大家都是接受 BEM 的核心思想然后通过短横线来连接这种命名规范，比如：head</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">input</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">search。</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">SMACSS</span><span style="color:#A6ACCD;">(Scalable and Modular Architecture for CSS)  blmst</span></span>
<span class="line"><span style="color:#A6ACCD;">bem的核心是分层，smacss的核心是分类 样式主要有5类</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.1</span><span style="color:#A6ACCD;"> Base（基础）：元素选择器 html </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> div</span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.2</span><span style="color:#A6ACCD;"> Layout（布局）：一般布局类名都是 </span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">l</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 开头</span></span>
<span class="line"><span style="color:#A6ACCD;">blmst</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">l</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">header </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">l</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">primarynav </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">l</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">main</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">content </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.3</span><span style="color:#A6ACCD;"> Module（模块）：可重用可复用的部分</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">moudle</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.4</span><span style="color:#A6ACCD;"> State（状态）</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">is</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xx</span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">//动态交互 .is-collapsed {} .is-active {}</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.5</span><span style="color:#A6ACCD;"> Theme（主题）</span></span>
<span class="line"><span style="color:#A6ACCD;">__theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css</span></span></code></pre></div><h3 id="_5-7-3-postcss" tabindex="-1">5.7.3 postcss <a class="header-anchor" href="#_5-7-3-postcss" aria-label="Permalink to &quot;5.7.3 postcss&quot;">​</a></h3><p>可以看作css的babel工具，能够压缩css.也是样式兼容工具，加前缀，重置等</p><h4 id="_5-7-3-1-autoprefixer" tabindex="-1">5.7.3.1 Autoprefixer <a class="header-anchor" href="#_5-7-3-1-autoprefixer" aria-label="Permalink to &quot;5.7.3.1 Autoprefixer&quot;">​</a></h4><p>Autoprefixer 使用Browserslist，因此你可以通过查询指定要在项目中定位的浏览器。</p><p>我们可以使用“browserslist”键在 package.json 文件中配置我们的 Browserslist：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">browserslist</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">defaults</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">]</span></span></code></pre></div><p>上面的<code>defaults</code>查询是以下内容的简短版本：</p><ul><li><code>&gt; 0.5%</code>全球使用率至少为 0.5% 的浏览器。</li><li><code>last 2 versions</code><em>每个</em>浏览器的最后 2 个版本，</li><li><code>Firefox ESR</code>最新的<a href="https://link.juejin.cn?target=https%3A%2F%2Fsupport.mozilla.org%2Fen-US%2Fkb%2Fchoosing-firefox-update-channel" target="_blank" rel="noreferrer">Firefox 扩展支持版本</a>.,</li><li><code>not dead</code>在过去 24 个月内获得官方支持或更新的浏览器。</li></ul><p>或者我们可以使用<code>.browserslistrc</code>根目录中的文件，并在其中输入我们的配置。</p><h4 id="_5-7-3-2-postcss-import" tabindex="-1">5.7.3.2 postcss-import <a class="header-anchor" href="#_5-7-3-2-postcss-import" aria-label="Permalink to &quot;5.7.3.2 postcss-import&quot;">​</a></h4><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">允许我们用</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./components/comp2.css</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">语法</span></span></code></pre></div><h4 id="_5-7-3-3-cssnano" tabindex="-1">5.7.3.3 cssnano <a class="header-anchor" href="#_5-7-3-3-cssnano" aria-label="Permalink to &quot;5.7.3.3 cssnano&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">缩小css的大小</span></span></code></pre></div><h4 id="_5-7-3-4-postcss-preset-env-处理兼容" tabindex="-1">5.7.3.4 postcss-preset-env | 处理兼容 <a class="header-anchor" href="#_5-7-3-4-postcss-preset-env-处理兼容" aria-label="Permalink to &quot;5.7.3.4 postcss-preset-env | 处理兼容&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">npm install postcss</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">preset</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">env@</span><span style="color:#F78C6C;">7.8</span><span style="color:#89DDFF;">.</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">//postcss-preset-env预设就是插件的集合</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> path </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">entry</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./src/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">output</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">filename</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">main.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">(__dirname</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dist</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">module</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">rules</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\.</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">style-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">css-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">              </span><span style="color:#F07178;">loader</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">postcss-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">options</span><span style="color:#89DDFF;">:{</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// webpack选项</span></span>
<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#F07178;">postcssOptions</span><span style="color:#89DDFF;">:{</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// loader配置选项</span></span>
<span class="line"><span style="color:#A6ACCD;">                        </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">[</span></span>
<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">autoprefixer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">                            </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">postcss-preset-env</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">                        ]</span></span>
<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span></span>
<span class="line"><span style="color:#A6ACCD;">        ]</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\.</span><span style="color:#C3E88D;">less</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">style-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">css-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">postcss-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">less-loader</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">        ]</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    ]</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_5-8-选择器-难" tabindex="-1">5.8 选择器(难) <a class="header-anchor" href="#_5-8-选择器-难" aria-label="Permalink to &quot;5.8 选择器(难)&quot;">​</a></h2><h3 id="_5-8-1-邻居-直接相邻-兄弟选择器" tabindex="-1">5.8.1 邻居(~) | 直接相邻(+)兄弟选择器 <a class="header-anchor" href="#_5-8-1-邻居-直接相邻-兄弟选择器" aria-label="Permalink to &quot;5.8.1  邻居(~) |  直接相邻(+)兄弟选择器&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">h1 </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> p </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">margin</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;">50</span><span style="color:#A6ACCD;">px</span><span style="color:#89DDFF;">;}</span><span style="color:#FFCB6B;">相邻兄弟</span><span style="color:#89DDFF;">:</span><span style="color:#82AAFF;">紧随h1的p元素</span><span style="color:#A6ACCD;">(必须紧跟A后面，A前面无效)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">h1 </span><span style="color:#89DDFF;">~</span><span style="color:#A6ACCD;"> p </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">margin</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;">50</span><span style="color:#A6ACCD;">px</span><span style="color:#89DDFF;">;}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">~</span><span style="color:#A6ACCD;">是在h1之后，但是不用紧随  </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">~</span><span style="color:#A6ACCD;"> 对应着webpack的小版本</span></span></code></pre></div><h3 id="_5-8-2-后代选择器-空格-直接后代选择器" tabindex="-1">5.8.2 后代选择器(空格) | 直接后代选择器(&gt;) <a class="header-anchor" href="#_5-8-2-后代选择器-空格-直接后代选择器" aria-label="Permalink to &quot;5.8.2 后代选择器(空格) |  直接后代选择器(&gt;)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">h1  p </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">margin</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;">50</span><span style="color:#A6ACCD;">px</span><span style="color:#89DDFF;">;}</span><span style="color:#A6ACCD;"> 就是老大小弟元素。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">选择h1的一代p元素 其中 有点像的是</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">只会选择一代</span></span></code></pre></div><h3 id="_5-8-3-并列元素-逗号" tabindex="-1">5.8.3 并列元素(逗号) <a class="header-anchor" href="#_5-8-3-并列元素-逗号" aria-label="Permalink to &quot;5.8.3  并列元素(逗号)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">29.3</span><span style="color:#A6ACCD;"> 并列元素是逗号，</span><span style="color:#FFCB6B;">如果要把并列元素优化何以用</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">where </span><span style="color:#FFCB6B;">和</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">is选择器</span></span>
<span class="line"><span style="color:#A6ACCD;">例如</span></span>
<span class="line"><span style="color:#A6ACCD;">:</span><span style="color:#82AAFF;">is</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">red</span><span style="color:#89DDFF;">,.</span><span style="color:#A6ACCD;">xx)</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">background</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">注意 where的权重是0，:is的权重是100</span></span></code></pre></div><h3 id="_5-8-4-where-is" tabindex="-1">5.8.4 where | is <a class="header-anchor" href="#_5-8-4-where-is" aria-label="Permalink to &quot;5.8.4 where | is&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css :where 选择器，可以给他指定一组选择器作为参数，来选择所有满足条件的元素。例如选择所有 div 和 section 元素：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">:</span><span style="color:#82AAFF;">where</span><span style="color:#A6ACCD;">(div</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> section) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">border</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 1</span><span style="color:#A6ACCD;">px</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">solid</span><span style="color:#F07178;"> #8965</span><span style="color:#A6ACCD;">f6</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 24</span><span style="color:#A6ACCD;">px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">例如</span></span>
<span class="line"><span style="color:#A6ACCD;">:</span><span style="color:#82AAFF;">is</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">red</span><span style="color:#89DDFF;">,.</span><span style="color:#A6ACCD;">xx)</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">background</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">p</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#82AAFF;">where</span><span style="color:#A6ACCD;">(a</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">link</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> button</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">btn) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#FFCB6B;">color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> #83</span><span style="color:#A6ACCD;">fd7a</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">注意 where的权重是0，:is的权重是100</span></span></code></pre></div><p>复杂的布局我们用gird，简单的二维布局我们用flex就可以了</p><h2 id="_5-9-css新特性" tabindex="-1">5.9 css新特性 <a class="header-anchor" href="#_5-9-css新特性" aria-label="Permalink to &quot;5.9 css新特性&quot;">​</a></h2><h3 id="_5-9-1-webkit-mask-image" tabindex="-1">5.9.1 -webkit-mask-image <a class="header-anchor" href="#_5-9-1-webkit-mask-image" aria-label="Permalink to &quot;5.9.1 -webkit-mask-image&quot;">​</a></h3><p>b站的弹幕不受遮挡的源码。ai生成模板</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">position: relative;</span></span>
<span class="line"><span style="color:#A6ACCD;"> -webkit-mask-image: url(&quot;</span><span style="color:#FFCB6B;">mask</span><span style="color:#A6ACCD;">.svg&quot;);</span></span>
<span class="line"><span style="color:#A6ACCD;"> -webkit-mask-size: 668px 376px;</span></span></code></pre></div><h3 id="_5-9-2-pr-webkit-tap-highlight-color" tabindex="-1">5.9.2 pr | webkit-tap-highlight-color <a class="header-anchor" href="#_5-9-2-pr-webkit-tap-highlight-color" aria-label="Permalink to &quot;5.9.2 pr |  webkit-tap-highlight-color&quot;">​</a></h3><p>解决移动端点击tabs有色块的问题</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">WebkitTouchCallout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#FFCB6B;">WebkitTapHighlightColor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">transparent</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span></code></pre></div><h2 id="_5-11-交互-理论-用户体验法则" tabindex="-1">5.11 交互 理论 | 用户体验法则 <a class="header-anchor" href="#_5-11-交互-理论-用户体验法则" aria-label="Permalink to &quot;5.11 交互 理论 | 用户体验法则&quot;">​</a></h2><h3 id="_5-11-1-fitts-s-law-菲茨定律" tabindex="-1">5.11.1 Fitts’s Law(菲茨定律) <a class="header-anchor" href="#_5-11-1-fitts-s-law-菲茨定律" aria-label="Permalink to &quot;5.11.1  Fitts’s Law(菲茨定律)&quot;">​</a></h3><p>到达目标的移动时间取决于目标的大小和到目标的距离。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">触摸目标之间应该有足够的间距</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">触摸目标足够大</span></span></code></pre></div><h3 id="_5-11-2-doherty-threshold-多尔蒂阈值" tabindex="-1">5.11.2 Doherty Threshold（多尔蒂阈值） <a class="header-anchor" href="#_5-11-2-doherty-threshold-多尔蒂阈值" aria-label="Permalink to &quot;5.11.2 Doherty Threshold（多尔蒂阈值）&quot;">​</a></h3><p>&lt;400 毫秒进行交互时，工作效率就会飙升</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">进度条有助于让等待时间变得可以忍受，无论其准确性如何。(加上进度条</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">动画)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">有目的地为流程添加延迟实际上可以增加其感知价值并灌输信任感，即使流程本身实际上花费的时间要少得多。(加上延迟)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">响应时间在400ms之类</span></span></code></pre></div><h3 id="_5-11-3-goal-gradient-effect-目标梯度效应" tabindex="-1">5.11.3 Goal-Gradient Effect(目标梯度效应) <a class="header-anchor" href="#_5-11-3-goal-gradient-effect-目标梯度效应" aria-label="Permalink to &quot;5.11.3 Goal-Gradient Effect(目标梯度效应)&quot;">​</a></h3><p>接近目标的倾向随着接近目标而增加</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">提供清晰的进度指示，以激励用户完成任务</span></span></code></pre></div><h3 id="_5-11-4-hick-s-law-希克定律" tabindex="-1">5.11.4 Hick’s Law(希克定律) <a class="header-anchor" href="#_5-11-4-hick-s-law-希克定律" aria-label="Permalink to &quot;5.11.4 Hick’s Law(希克定律)&quot;">​</a></h3><p>做出决定所需的时间随着选择的数量和复杂性而增加。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">当响应时间对增加决策时间至关重要时，尽量减少选择。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">将复杂的任务分解成更小的步骤，以减少认知负荷。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">通过突出推荐的选项来避免让用户不知所措</span><span style="color:#A6ACCD;">(有点意思)。创造游戏角色的时候可以用得上</span></span></code></pre></div><h3 id="_5-11-5-jakob-s-law-雅各布定律" tabindex="-1">5.11.5 Jakob’s Law(雅各布定律) <a class="header-anchor" href="#_5-11-5-jakob-s-law-雅各布定律" aria-label="Permalink to &quot;5.11.5 Jakob’s Law(雅各布定律)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">用户会将他们围绕一种熟悉的产品建立的期望转移到另一种看起来相似的产品上。(模仿现成竞品)</span></span></code></pre></div><h3 id="_5-11-6-布局法则" tabindex="-1">5.11.6 布局法则 <a class="header-anchor" href="#_5-11-6-布局法则" aria-label="Permalink to &quot;5.11.6  布局法则&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">靠近的元素被认为具有相似的功能或特征。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">公共区域创建清晰的结构，</span><span style="color:#82AAFF;">帮助用户快速有效地理解元素和部分之间的关系</span><span style="color:#A6ACCD;">(简单方法)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">确保链接和导航系统在视觉上与普通文本元素有所区别。</span></span></code></pre></div><h3 id="_5-11-7-miller-s-law-米勒定律" tabindex="-1">5.11.7 Miller’s Law(米勒定律) <a class="header-anchor" href="#_5-11-7-miller-s-law-米勒定律" aria-label="Permalink to &quot;5.11.7   Miller’s Law(米勒定律)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">一般人在工作记忆中只能保留 </span><span style="color:#F78C6C;">7</span><span style="color:#A6ACCD;">（正负 </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">）</span><span style="color:#82AAFF;">项</span><span style="color:#A6ACCD;">(不要太密集)</span></span></code></pre></div><h3 id="_5-11-8-occam-s-razor-奥卡姆剃刀" tabindex="-1">5.11.8 Occam’s Razor(奥卡姆剃刀) <a class="header-anchor" href="#_5-11-8-occam-s-razor-奥卡姆剃刀" aria-label="Permalink to &quot;5.11.8 Occam’s Razor(奥卡姆剃刀)&quot;">​</a></h3><p>在预测效果相同的竞争假设中，应选择假设最少的假设。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">降低复杂性的最佳方法是首先避免它</span><span style="color:#A6ACCD;">(人们应该选择做出最少假设的答案)</span></span></code></pre></div><h2 id="_5-14-流行设计风格" tabindex="-1">5.14 流行设计风格 <a class="header-anchor" href="#_5-14-流行设计风格" aria-label="Permalink to &quot;5.14 流行设计风格&quot;">​</a></h2><h3 id="_5-14-1-skeuomorphism-拟物" tabindex="-1">5.14.1 (skeuomorphism)拟物 <a class="header-anchor" href="#_5-14-1-skeuomorphism-拟物" aria-label="Permalink to &quot;5.14.1 (skeuomorphism)拟物&quot;">​</a></h3><p>mo fi shen</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">就是 例如 wifi 图标 就变成 这个图标</span></span></code></pre></div><h3 id="_5-14-2-flat-扁平" tabindex="-1">5.14.2( flat) 扁平 <a class="header-anchor" href="#_5-14-2-flat-扁平" aria-label="Permalink to &quot;5.14.2( flat) 扁平&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">字面意思：有点类似于现在的 fontsome</span></span></code></pre></div><h3 id="_5-14-3-material-design-物料设计" tabindex="-1">5.14.3 (material design) 物料设计 <a class="header-anchor" href="#_5-14-3-material-design-物料设计" aria-label="Permalink to &quot;5.14.3  (material design) 物料设计&quot;">​</a></h3><p><a href="https://www.mdui.org/design/resources/layout-templates.html#layout-templates-tablet" target="_blank" rel="noreferrer">https://www.mdui.org/design/resources/layout-templates.html#layout-templates-tablet</a></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">阴影、明亮的高光并存。干净</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">匹配品牌的外观和感觉</span></span></code></pre></div><h3 id="_5-14-4-neumorphism-新拟态" tabindex="-1">5.14.4 neumorphism(新拟态) <a class="header-anchor" href="#_5-14-4-neumorphism-新拟态" aria-label="Permalink to &quot;5.14.4 neumorphism(新拟态)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">模拟凸出或者凹下去的感觉</span></span></code></pre></div><h3 id="_5-14-5-glassmorphism-玻璃态" tabindex="-1">5.14.5 glassmorphism(玻璃态) <a class="header-anchor" href="#_5-14-5-glassmorphism-玻璃态" aria-label="Permalink to &quot;5.14.5 glassmorphism(玻璃态)&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">主要是对背景颜色的虚化，模拟</span></span></code></pre></div><h3 id="_5-14-6-claymorphism-泥陶态" tabindex="-1">5.14.6 claymorphism(泥陶态) <a class="header-anchor" href="#_5-14-6-claymorphism-泥陶态" aria-label="Permalink to &quot;5.14.6 claymorphism(泥陶态)&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">--1.模拟3d 效果，给人一种可以按下去的感觉</span></span></code></pre></div><h2 id="_5-15-大屏无敌的布局" tabindex="-1">5.15 大屏无敌的布局 <a class="header-anchor" href="#_5-15-大屏无敌的布局" aria-label="Permalink to &quot;5.15 大屏无敌的布局&quot;">​</a></h2><p>建议 grid 布局梭哈</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">screem_container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> grid</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">grid-template-columns</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1fr</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2fr</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1fr</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">grid-template-rows</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1fr</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1fr</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1fr</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/* // grid-row-gap: 5px; // 行间距</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    // grid-column-gap: 5px; // 列间距 */</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">item</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    // </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> green</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">    //  横着 占的 位置（开始 然后span 是 横跨几个单位） | 竖着 占的位置</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">grid-column</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> / span </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">grid-row</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> / span </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span></code></pre></div><img src="/front-base-know-blog/assets/css_grid_screem.1303100b.png"><h2 id="_5-16-优先级" tabindex="-1">5.16 优先级 <a class="header-anchor" href="#_5-16-优先级" aria-label="Permalink to &quot;5.16 优先级&quot;">​</a></h2><h3 id="_5-16-1-级联层-layer-优先级" tabindex="-1">5.16.1 级联层 | layer 优先级 <a class="header-anchor" href="#_5-16-1-级联层-layer-优先级" aria-label="Permalink to &quot;5.16.1 级联层 |  layer 优先级&quot;">​</a></h3><p>2022 年出的东西</p><p>layer 越<code>后</code>优先级越高，但是总的来说，还是没有被 layer 包裹的样式 好一点</p><p>layer 中 important 越前优先级越高</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;"> A </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;"> B </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> orange</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> unname</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;"> C </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> yellow</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> green</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 未被 @layer 包裹的样式 */</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">上述规则的排序是：</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">未被 </span><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;"> 包裹的样式 &gt;  @layer C &gt; 匿名层 &gt; @layer B &gt; @layer A</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">!impoetant 的 优先级 还是最高</span></span>
<span class="line"><span style="color:#A6ACCD;">但是要注意 !important 下样式优先级的规则与非 !important 正常状态下刚好相反。这是因为css 的  CSS Cascading 规定 大的</span></span></code></pre></div><ul><li>Normal user agent declarations</li><li>Normal user declarations</li></ul><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@layer</span><span style="color:#A6ACCD;"> B, C, A 就可以 在一开始 优先级</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">emmm 举个例子。我们需要引入第三方库的 CSS，为了便于管理，或者便于覆盖其中的一些样式，在之前，只能通过写优先级更高的class去覆盖，或者通过!important去覆盖。</span></span>
<span class="line"><span style="color:#A6ACCD;">有了 @layer 之后，可以这样写：</span></span>
<span class="line"><span style="color:#A6ACCD;">​```</span></span>
<span class="line"><span style="color:#A6ACCD;">@import(elementUI.css) layer(elementUI);</span></span>
<span class="line"><span style="color:#A6ACCD;">@import(page.css) layer(page);</span></span></code></pre></div><h3 id="_5-16-2-优先级" tabindex="-1">5.16.2 优先级 <a class="header-anchor" href="#_5-16-2-优先级" aria-label="Permalink to &quot;5.16.2 优先级&quot;">​</a></h3><ul><li>资源顺序(后的覆盖前面的)</li><li>优先级(权重)</li><li>重要程度</li></ul><h2 id="_5-17-少见特性" tabindex="-1">5.17 少见特性 <a class="header-anchor" href="#_5-17-少见特性" aria-label="Permalink to &quot;5.17 少见特性&quot;">​</a></h2><h3 id="_5-17-1-css新单位" tabindex="-1">5.17.1 css新单位 <a class="header-anchor" href="#_5-17-1-css新单位" aria-label="Permalink to &quot;5.17.1  css新单位&quot;">​</a></h3><ul><li><p>d 是动态修饰符号 ( URL + 刘海屏幕屏幕)</p></li><li><p>l是 large</p></li><li><p>s是small 都是表示移动端自适应的方法</p></li><li><p>vmin/vmax 也不错 但是他是自适应平台的</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">container</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">height</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 100</span><span style="color:#A6ACCD;">svh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">width</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> 100</span><span style="color:#A6ACCD;">lvw</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">background</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-08-23T03:04:28.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/front-base-know-blog/know/know/6ts" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>TypeScript</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/front-base-know-blog/know/know/8bug" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>BUG</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f0b011de data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>MIT License.</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023～present Electrolux</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"95f8ca9d\",\"java_base.md\":\"edc53698\",\"guide_quick start.md\":\"51bdad5b\",\"java_java.md\":\"07f7958b\",\"know_know_11.web3.md\":\"930011fd\",\"supper_工具基础_16.代码高亮.md\":\"775a71ba\",\"supper_工具基础_6codepen.md\":\"46f8bbbd\",\"supper_工具基础_5ps切图.md\":\"dc662c1f\",\"supper_前端库_1vueify.md\":\"04b61666\",\"supper_工程化_7性能优化和调试.md\":\"981a8dd6\",\"know_know_8adb.md\":\"ccc6c2e0\",\"supper_工具基础_1sourcetree的使用.md\":\"d71319d4\",\"know_know_10.项目具体代码优化.md\":\"f55add09\",\"supper_工程化_4docker 部署实操.md\":\"2e571e48\",\"know_know_1html.md\":\"19aaf16a\",\"supper_工具基础_8graphql.md\":\"198ddc72\",\"supper_工程化_6gitee流水线.md\":\"93a4c7ff\",\"know_know_5javascript-es6.md\":\"4c2cf8f7\",\"know_框架_16.echart.md\":\"0ada5f86\",\"know_know_3javascript基础.md\":\"900d378b\",\"know_优化_3算法.md\":\"8f5141e6\",\"know_框架_14webgl基础.md\":\"00a11e3e\",\"python_flask.md\":\"c8a0482c\",\"supper_功能_9监控停留时间.md\":\"2df00eaf\",\"know_框架_7python.md\":\"7d7eed5d\",\"supper_工程化_1工程化基础.md\":\"d48b3bbc\",\"know_优化_9wasm.md\":\"8d5d5bf6\",\"supper_工具基础_3github图床.md\":\"7073aa94\",\"supper_功能_8前端上传下载.md\":\"99e30d2a\",\"know_框架_13electron.md\":\"d3e93be3\",\"supper_前端库_3js-cookie.md\":\"91624dd6\",\"supper_工具基础_9快速mock.md\":\"215a0e2b\",\"know_know_4javascript代码输出题.md\":\"7348a30a\",\"python_base.md\":\"7acd6bad\",\"supper_功能_5微信支付.md\":\"d09d8b08\",\"know_框架_12threejs.md\":\"b6fbcf93\",\"know_框架_7tensorflow.md\":\"2ccc8062\",\"supper_工具基础_7icon实操.md\":\"f1512b60\",\"supper_工具基础_2用gitee连接ssh_linux服务器.md\":\"1bc61e8d\",\"supper_3d数字孪生_3ar的使用.md\":\"5db75881\",\"python_flask_开始.md\":\"54460465\",\"know_know_12.运维.md\":\"b8bd4e62\",\"supper_工具基础_14.vscode.md\":\"f106db65\",\"know_优化_12.pwa.md\":\"8327b1db\",\"know_know_6ts.md\":\"49f90aab\",\"supper_supper_4ui设计.md\":\"53988b67\",\"supper_功能_10数据大屏自适应.md\":\"7c40b558\",\"supper_工程化_3关于一些自动化脚本.md\":\"38029566\",\"know_know_4javascript手写题.md\":\"50a7a32f\",\"supper_工具基础_13mac的使用.md\":\"56de5b9c\",\"know_know_2javascript基础.md\":\"3d42c0ee\",\"supper_功能_7深度学习实操.md\":\"f6b94234\",\"know_优化_5npm_组件库构造.md\":\"67d2b67c\",\"know_计算机基础_1计算机网络.md\":\"5d905f95\",\"supper_3d数字孪生_2three世泊大屏实操.md\":\"beb9c2f8\",\"supper_功能_11拖拽元素.md\":\"cf7bf8a0\",\"python_llm.md\":\"e97febae\",\"know_know_7css.md\":\"06a3d117\",\"supper_supper_2实用算法.md\":\"e4baf1d9\",\"supper_工具基础_4git的基本使用.md\":\"c5629b74\",\"supper_功能_12vue-element-admin.md\":\"20c09558\",\"supper_工程化_5给包打补丁.md\":\"5103e073\",\"know_框架_11逆向数据crawl.md\":\"ae5ee06c\",\"supper_功能_4ffmpeg-rmtp监控.md\":\"39152e9b\",\"project_图表绘制.md\":\"dd437537\",\"supper_工具基础_12nvm.md\":\"329d446d\",\"know_框架_8mediapipe.md\":\"23fc89f2\",\"know_优化_6webrtc.md\":\"21589281\",\"know_优化_1性能优化和安全.md\":\"270924f0\",\"supper_功能_1小功能汇总.md\":\"5663f27a\",\"know_框架_4微前端.md\":\"76663f96\",\"supper_supper_1代码优化.md\":\"6126a362\",\"know_框架_10aframe.md\":\"7daf1aa1\",\"supper_supper_3性能优化.md\":\"86672f22\",\"know_优化_11.webcomponent.md\":\"94e3cf8a\",\"supper_功能_2小功能汇总.md\":\"692f88ef\",\"know_框架_1vue.md\":\"a9100a41\",\"supper_个人封装_1个人发包模板.md\":\"6b48d3d3\",\"supper_工具基础_10脚手架.md\":\"534226fa\",\"supper_工具基础_11figma.md\":\"ffebb5c1\",\"know_框架_15threejs.md\":\"85dc8e0c\",\"supper_功能_3小功能汇总.md\":\"9765dc9a\",\"supper_功能_6v-model组件封装.md\":\"9df7d5cf\",\"supper_3d数字孪生_5threejs的性能优化.md\":\"eafc4b19\",\"know_框架_8ffmpeg.md\":\"56543d8b\",\"supper_3d数字孪生_1webgl基础.md\":\"9602a381\",\"know_框架_4three数据大屏.md\":\"9b71f7c5\",\"know_框架_3ssr.md\":\"f78ee50f\",\"supper_前端库_2anime.js.md\":\"62c0fbd1\",\"know_框架_2react.md\":\"3ef491f2\",\"know_框架_5vue3.md\":\"a9430a8a\",\"know_框架_17webpack.md\":\"d7f6f200\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Electrolux_blog\",\"description\":\"hello world\",\"base\":\"/front-base-know-blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"目录\",\"i18nRouting\":true,\"logo\":\"https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端基础\",\"link\":\"/know/know/1html\"},{\"text\":\"前端工程化\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"Python\",\"link\":\"/python/flask.md\"},{\"text\":\"Java\",\"link\":\"/java/java.md\"},{\"text\":\"项目\",\"link\":\"/project/javadump分析.md\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/Electrolux\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2023～present Electrolux\"},\"sidebar\":{\"/know/\":[{\"text\":\"前端基础\",\"collapsed\":false,\"items\":[{\"text\":\"html(浏览器)\",\"link\":\"/know/know/1html\"},{\"text\":\"js基础(1)\",\"link\":\"/know/know/2javascript基础\"},{\"text\":\"js基础(2)\",\"link\":\"/know/know/3javascript基础\"},{\"text\":\"js基础(3) | 手写题\",\"link\":\"/know/know/4javascript手写题\"},{\"text\":\"js基础(3) | 代码输出\",\"link\":\"/know/know/4javascript代码输出题\"},{\"text\":\"js基础(4) | es6\",\"link\":\"/know/know/5javascript-es6\"},{\"text\":\"js基础(5)\",\"link\":\"/know/know/9javascript基础\"},{\"text\":\"TypeScript\",\"link\":\"/know/know/6ts\"},{\"text\":\"CSS\",\"link\":\"/know/know/7css\"},{\"text\":\"BUG\",\"link\":\"/know/know/8bug\"}]},{\"text\":\"计算机基础\",\"collapsed\":false,\"items\":[{\"text\":\"计算机网络\",\"link\":\"/know/计算机基础/1计算机网络\"}]},{\"text\":\"框架 | 工具\",\"collapsed\":false,\"items\":[{\"text\":\"vue\",\"link\":\"/know/框架/1vue\"},{\"text\":\"react\",\"link\":\"/know/框架/2react\"},{\"text\":\"ssr\",\"link\":\"/know/框架/3ssr\"},{\"text\":\"微前端\",\"link\":\"/know/框架/4微前端\"},{\"text\":\"vue3\",\"link\":\"/know/框架/5vue3\"},{\"text\":\"nginx\",\"link\":\"/know/框架/6nginx\"},{\"text\":\"python\",\"link\":\"/know/框架/7python\"},{\"text\":\"ffmpeg\",\"link\":\"/know/框架/8ffmpeg\"},{\"text\":\"tensorFlow\",\"link\":\"/know/优化/7tensorFlow\"},{\"text\":\"mediapipe\",\"link\":\"/know/优化/8mediapipe\"},{\"text\":\"aframe\",\"link\":\"/know/框架/10aframe\"},{\"text\":\"逆向数据crawl\",\"link\":\"/know/框架/11逆向数据crawl\"},{\"text\":\"threejs\",\"link\":\"/know/框架/12threejs\"},{\"text\":\"13electron\",\"link\":\"/know/框架/13electron\"},{\"text\":\"13electron\",\"link\":\"/know/框架/17webpack\"}]},{\"text\":\"优化 | 工程\",\"collapsed\":false,\"items\":[{\"text\":\"性能优化和安全\",\"link\":\"/know/优化/1性能优化和安全\"},{\"text\":\"算法\",\"link\":\"/know/优化/3算法\"},{\"text\":\"性能优化\",\"link\":\"/know/优化/4性能优化\"},{\"text\":\"组件库构造\",\"link\":\"/know/优化/5npm,组件库构造\"},{\"text\":\"webrtc\",\"link\":\"/know/优化/6webrtc\"},{\"text\":\"wasm\",\"link\":\"/know/优化/9.wasm\"},{\"text\":\"webcomponent\",\"link\":\"/know/优化/11.webcomponent\"},{\"text\":\"pwa\",\"link\":\"/know/优化/12.pwa\"}]}],\"/java/\":[{\"text\":\"java\",\"collapsed\":false,\"items\":[{\"text\":\"jvm\",\"link\":\"/java/java\"},{\"text\":\"springboot\",\"link\":\"/java/base\"}]}],\"/python/\":[{\"text\":\"python 基础\",\"collapsed\":false,\"items\":[{\"text\":\"服务器\",\"link\":\"/python/flask\"}]}],\"/project/\":[{\"text\":\"项目文档\",\"collapsed\":false,\"items\":[{\"text\":\"java dump\",\"link\":\"/project/图表绘制\"}]}],\"/supper/\":[{\"text\":\"代码高级\",\"collapsed\":false,\"items\":[{\"text\":\"代码优化 | 设计模式\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"设计模式与js\",\"link\":\"/supper/supper/2实用算法\"},{\"text\":\"性能优化\",\"link\":\"/supper/supper/3性能优化\"},{\"text\":\"UI设计\",\"link\":\"/supper/supper/4UI设计\"}]},{\"text\":\"工程化\",\"collapsed\":false,\"items\":[{\"text\":\"工程化基础\",\"link\":\"/supper/工程化/1工程化基础\"},{\"text\":\"webpack的配置\",\"link\":\"/supper/工程化/2webpack的配置\"},{\"text\":\"自动化脚本\",\"link\":\"/supper/工程化/3关于一些自动化脚本\"},{\"text\":\"docker 部署实操\",\"link\":\"/supper/工程化/4docker 部署实操\"},{\"text\":\"patch-package\",\"link\":\"/supper/工程化/5给包打补丁\"},{\"text\":\"gitee流水线\",\"link\":\"/supper/工程化/6gitee流水线\"}]},{\"text\":\"工具基础\",\"collapsed\":false,\"items\":[{\"text\":\"Sourcetree的使用\",\"link\":\"/supper/工具基础/1Sourcetree的使用\"},{\"text\":\"用gitee连接ssh,linux服务器\",\"link\":\"/supper/工具基础/2用gitee连接ssh,linux服务器\"},{\"text\":\"github图床\",\"link\":\"/supper/工具基础/3github图床\"},{\"text\":\"git的基本使用\",\"link\":\"/supper/工具基础/4git的基本使用\"},{\"text\":\"ps切图\",\"link\":\"/supper/工具基础/5ps切图\"},{\"text\":\"codepen\",\"link\":\"/supper/工具基础/6codepen\"},{\"text\":\"icon实操 | svg原理\",\"link\":\"/supper/工具基础/7Icon实操\"},{\"text\":\"GraphQl\",\"link\":\"/supper/工具基础/8GraphQl\"},{\"text\":\"快速mock\",\"link\":\"/supper/工具基础/9快速mock\"},{\"text\":\"脚手架\",\"link\":\"/supper/工具基础/10脚手架\"},{\"text\":\"figma\",\"link\":\"/supper/工具基础/11figma\"},{\"text\":\"nvm\",\"link\":\"/supper/工具基础/12nvm\"},{\"text\":\"苹果\",\"link\":\"/supper/工具基础/13mac的使用\"}]},{\"text\":\"个人封装\",\"collapsed\":false,\"items\":[{\"text\":\"个人封装\",\"link\":\"/supper/个人封装/1个人发包模板\"}]},{\"text\":\"前端库\",\"collapsed\":false,\"items\":[{\"text\":\"vueify\",\"link\":\"/supper/前端库/1vueify\"},{\"text\":\"anime.js\",\"link\":\"/supper/前端库/2anime.js\"},{\"text\":\"js-cookie\",\"link\":\"/supper/前端库/3js-cookie\"}]},{\"text\":\"功能\",\"collapsed\":false,\"items\":[{\"text\":\"小功能汇总1\",\"link\":\"/supper/功能/1小功能汇总\"},{\"text\":\"小功能汇总2\",\"link\":\"/supper/功能/2小功能汇总\"},{\"text\":\"小功能汇总3\",\"link\":\"/supper/功能/3小功能汇总\"},{\"text\":\"ffmpeg-rmtp监控\",\"link\":\"/supper/功能/4ffmpeg-rmtp监控\"},{\"text\":\"微信支付\",\"link\":\"/supper/功能/5微信支付\"},{\"text\":\"v-model组件封装\",\"link\":\"/supper/功能/6v-model组件封装\"},{\"text\":\"深度学习实操\",\"link\":\"/supper/功能/7深度学习实操\"},{\"text\":\"前端上传下载\",\"link\":\"/supper/功能/8前端上传下载\"},{\"text\":\"监控停留时间\",\"link\":\"/supper/功能/9监控停留时间\"},{\"text\":\"数据大屏自适应\",\"link\":\"/supper/功能/10数据大屏自适应\"},{\"text\":\"拖拽元素\",\"link\":\"/supper/功能/11拖拽元素\"},{\"text\":\"vue-element-admin\",\"link\":\"/supper/功能/12vue-element-admin\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>